Bootstrap工具提示不显示

Question

我正在尝试在我的应用中使用Bootstrap tooltip。目前，我有以下内容：

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

不幸的是，我的工具提示没有显示。我想弄清楚我做错了什么。我知道它可以通过JavaScript创建。但是，我正在尝试以声明方式定义我的工具提示。我已经确认包含了Tooltip.js文件。但是，我无法弄清楚我做错了什么。

是否可以在纯粹的声明意义上使用工具提示？如果是这样，有人可以通过JSFiddle或Bootply样本向我展示如何？我真的很想听到这个。

Answer 1

不，不可能在纯粹的声明意义上使用工具提示。来自Docs：

  

选择加入功能
  出于性能原因，Tooltip和Popover data-apis是选择加入的，这意味着您必须自己初始化它们。

因此，您必须在JavaScript中手动调用.tooltip()，如下所示：

$("[data-toggle=tooltip]").tooltip();

或使用您想要的任何选择器。

Working Demo in jsFiddle

这应该是这样的：

Answer 2

在我的项目中，我有一个带有.btn-group类的div和带有类btn的3'a'元素。使用Bootstrap正式代码初始化不起作用（我正在使用Twitter.Bootstrap.less，我不知道是否有任何不同之处）：

$(function({ 
    $('[data-toggle="tooltip"]').tooltip(); 
});

然后我在ImaJedi4ever回答的另一个StackOverFlow上发现了一个解决方案，它对我来说就像一个魅力，初始化引导工具提示：

$(function(){
    $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
});

Answer 3

有问题在流星中显示反应和bootstrap 4 alpha。这就像魔术一样！

componentDidMount() {
    $(function(){
        $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
    });
},

Answer 4

对于 Bootstrap 5：

参考链接：https://getbootstrap.com/docs/5.0/components/tooltips/

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div>
<button type="button" class="btn btn-secondary m-4" data-bs-toggle="tooltip" title="Tooltip">
  Tooltip
</button>
</div>