Question

我在我的网站上使用 Bootstrap framework 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参数是一个布尔值，因此您需要使用

将其设置为true

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

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

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

Bootstrap 3 docs for this：

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

这里的jsfiddle例子：

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

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

1 个答案: