使用Bootstrap如何在工具提示中添加图片？

Question

<button title="Tooltip on right" data-placement="right" data-toggle="tooltip" class="btn btn-default mrs" type="button">Tooltip on right</button>


<script>
  $(function () {
    $('[data-toggle=tooltip]').tooltip();
  });
</script>

这个功能很好，但我想在工具提示框里包含一张图片和一些文字。我尝试使用data-content="一些内容"，但它没有显示出来。

- dkx22

---

请给我们提供 .tooltip() 的代码，以及更多的代码。也许可以制作一个 fiddle。 - JClaspill

请阅读文档，了解如何设置HTML和内容模板。 - charlietfl

我尝试使用<template></template>，然后添加data-content="mytemplateid"......您可以在此处了解有关.tooltip()的更多信息（http://www.tutorialspoint.com/bootstrap/bootstrap_tooltip_plugin.htm）。 - dkx22

Answer 1

在初始化.tooltip时，您需要传入html选项。 例如：

<div class="cart"> 
    <a data-toggle="tooltip" title="<img src='http://getbootstrap.com/apple-touch-icon.png' />">
        <i class="icon-shopping-cart"></i>
    </a>

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    html: true
});

查看示例代码片段

- joshvito

---

谢谢，我不知道那个。有没有办法在标题以外的地方传递内容？我正在尝试使用data-content，但它不起作用。 - dkx22

你应该查看 Bootstrap 网站上的文档。http://getbootstrap.com/javascript/#tooltips-options 在你的情况下，我建议使用模板并使用 CSS 添加你的图片。 - joshvito

确实，所以弹出框具有data-content属性，但工具提示没有。 - dkx22

@dkx22 是的，看起来是这样的； - joshvito