【问题标题】:Image in tooltip using bootstrap?使用引导程序的工具提示中的图像?
【发布时间】:2023-03-05 00:38:01
【问题描述】:
<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="some stuff" 但它什么也没显示。

【问题讨论】:

  • 请给我们.tooltip() 所做的代码,以及更多的一般代码。也许做一个fiddle
  • 阅读有关如何设置 html 和内容模板的文档
  • 我尝试过使用 然后添加 data-cotent="mytemplateid"... 你可以找到关于 .tooltip() here

标签: javascript jquery twitter-bootstrap frontend


【解决方案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
});

查看示例fiddle

【讨论】:

  • 谢谢,不知道。有没有办法在标题以外的地方传递内容?我正在尝试使用数据内容,但它不起作用
  • 您应该查看引导站点上的文档。 getbootstrap.com/javascript/#tooltips-options 在您的情况下,我会使用模板并使用 css 添加您的图像。
  • 确实,所以 popover 有 data-content 属性但没有 tooltip
  • @dkx22 是的,好像是这样;
猜你喜欢
  • 1970-01-01
  • 2017-07-21
  • 1970-01-01
  • 1970-01-01
  • 2014-01-18
  • 1970-01-01
  • 1970-01-01
  • 2014-06-07
  • 2015-12-03
相关资源
最近更新 更多