Question

我正在尝试显示我的工具提示，但它无效。我尝试了什么

HTML

<a href="javascript:void(0);" data-toggle="tooltip">Hyperlink Text</a>

JS

$(document).ready(function() {
    //$("body").tooltip({ selector: '[data-toggle=tooltip]' });
    $('[data-toggle=tooltip]').tooltip({
        title: "<h1 style='background-color: #F00; color: #000;'>This is a test tooltips</h1>",
        html: true,
        placement: "bottom",
        trigger: "click"
    });
});

我的引导版本3.3.5和jQuery版本1.11.3

我的问题在哪里？任何建议将不胜感激。

Answer 1

检查一下：

要创建工具提示，请将data-toggle =“tooltip”属性添加到元素中。

使用标题属性指定应在工具提示中显示的文字：

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

但在你的情况下标题丢失了。添加标题然后重试。

Working Demo

Answer 2

我认为您的解决方案非常完美，除非您选择了trigger:click，因此tooltip可见。

不使用trigger:click - 在悬停时显示工具提示

＆＃13;

$(document).ready(function() {
  $('#togle').tooltip({
      title: "<h1 style='background-color: #F00; color: #000;'>This is a test tooltips</h1>",
      html: true,
      placement: "bottom"
  });
  
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="javascript:void(0);" id="togle" data-toggle="tooltip">Hyperlink Text</a>

＆＃13;

使用trigger:click - 点击

显示工具提示

＆＃13;

$(document).ready(function() {
  $('#togle').tooltip({
      title: "<h1 style='background-color: #F00; color: #000;'>This is a test tooltips</h1>",
      html: true,
      placement: "bottom",
      trigger:"click"
  });
  
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="javascript:void(0);" id="togle" data-toggle="tooltip">Hyperlink Text</a>

＆＃13;

Bootstrap工具提示不起作用

2 个答案: