javascript - 为什么我无法在 Bootstrap 工具提示中显示图像？

Question

我正在为我的网站使用 Bootstrap 框架 v3.3.0。

当用户将鼠标指针悬停在图标上时，我想在图像上显示为工具提示。为此，我有以下 HTML:

<div class="col-sm-5">
  <div class="input-group">  
    <input type="text" class="form-control" name="trans_id" id="trans_id"/>
    <span class="input-group-addon">
      <a href="#" class="glyphicon glyphicon-question-sign" rel="tooltip" data-html="true" title="localhost/img/demo_img.png"></a>    
    </span>
  </div>
</div>

jQuery代码如下:

$(document).ready(function() {
  $('.input-group-addon').tooltip({
    selector: "a[rel=tooltip]"
  })
});

悬停时无法显示图像。现在我在标题中提到的文本(即完整的图像位置路径显示为工具提示。)

包含所有必要的 CSS 和 jQuery 文件。

请在这方面帮助我。

提前致谢。

Answer 1

html参数是一个 bool 值，所以你需要将它设置为true

<a data-html="true" ...etc... >

然后您需要使用标题来提供您的 HTML 内容:

<a data-html="true" title="<img src='...' />" ...etc... >

Bootstrap 3 文档在这里:

http://getbootstrap.com/javascript/#tooltips-usage

此处为 jsfiddle 示例:

http://jsfiddle.net/sifriday/7s81L84m/