Bootstrap实现图片悬停显示效果教程

使用Bootstrap实现图片悬停显示效果

想要在用户鼠标悬停时显示图片？使用Bootstrap的Tooltip组件可以轻松实现！

步骤：

1. 添加HTML元素： 首先，在HTML代码中添加一个需要触发悬停显示图片的元素，例如一个按钮：

   <button type='button' class='btn btn-secondary' data-toggle='tooltip' data-placement='top' title='<img src=\'path/to/image.jpg\'>'>
     查看图片
   </button>
   

   代码解释：

   • data-toggle='tooltip'： 启用Bootstrap的Tooltip组件。
   • data-placement='top'： 设置Tooltip显示在元素的上方，你也可以选择'bottom', 'left', 'right'等位置。
   • title='<img src=\'path/to/image.jpg\'>'： 设置Tooltip的内容，这里我们插入一个图片标签，路径需要替换成你实际图片的路径。

2. 初始化Tooltip： 在JavaScript代码中初始化Tooltip组件，并设置html选项为true以允许HTML内容显示：

   $(function () {
     $('[data-toggle=\'tooltip\']').tooltip({
       html: true
     })
   })
   

现在，当你鼠标悬停在按钮上时，就会显示设置的图片了！

注意事项：

• 默认情况下，Bootstrap的Tooltip组件会对HTML代码进行转义，因此需要将html选项设置为true才能正确显示图片。
• 你可以通过修改title属性中的HTML代码来自定义显示的内容，例如添加文字描述、更改图片大小等。