我正在为我的网站使用 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 文件。
请在这方面帮助我。
提前致谢。
最佳答案
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 示例:
关于javascript - 为什么我无法在 Bootstrap 工具提示中显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27247680/