通过 jQuery 添加引导工具提示答案

【问题标题】：Add bootstrap tooltips via jQuery通过 jQuery 添加引导工具提示
【发布时间】：2020-07-14 12:38:41
【问题描述】：

我将如何遍历 div 中的一些链接并根据它们的标题文本将 Bootstrap 工具提示应用于它们。所以例如我需要这个：

<a href="#" tile="link1">Link 1</a>
<a href="#" tile="link2">Link 2</a>
<a href="#" tile="link3">Link 3</a>

变成这样：

<a href="#" data-toggle="tooltip" data-placement="bottom" tile="link1">Link 1</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" tile="link2">Link 2</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" tile="link3">Link 3</a>

【问题讨论】：

标签： html jquery twitter-bootstrap-3 twitter-bootstrap-tooltip

【解决方案1】：

检查一下：

$('a').each(function () {

    $(this).data('toggle', 'tooltip');
    $(this).data('placement', 'bottom');

    $(this).tooltip()
});

//for disable :
$('a').each(function () { 
    $(this).removeAttr("data-toggle");
    $(this).removeAttr("data-placement");
    $(this).tooltip('disable');
});

【讨论】：

太完美了。因此，当布局更改时，我在页面滚动时执行此功能，但还需要在 ELSE 功能中再次将其切换为 OFF。
我尝试在 ELSE 语句中添加禁用，并且已完全应用。所以他们总是被禁用？
你可以通过 $(this).tooltip('enable'); 再次启用
是的，有效。现在唯一的问题是它忽略了放置底部并由于某些原因默认为顶部？
有什么想法吗？

【解决方案2】：

试试这个：-

$('a').each(function(){
  $(this).attr({
    'data-toggle': 'tooltip',
    'data-placement': 'bottom',
  }).tooltip();
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<a href="#" title="link1">Link 1</a>
<a href="#" title="link2">Link 2</a>
<a href="#" title="link3">Link 3</a>

【讨论】：