Question

这是我的div

<div class="classdiv">11</div>
<div class="classdiv">22</div>
<div class="classdiv">33</div>
<div class="classdiv">44</div>
<div class="classdiv">55</div>
<div class="classdiv">66</div>

我需要使用 Jquery 将此div文本更改为工具提示，因为我无法手动更改它，因此有很多（http://getbootstrap.com/javascript/#tooltips）。因此，用户无法首先看到div的文本。当他将鼠标悬停在此处时，文本会出现在工具提示中。我知道如何制作工具提示，

<div class="classdiv" data-toggle="tooltip" data-placement="left" title="11">11</div>
 $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

但问题是我无法手动添加数据肘节=＆＃34;提示＆＃34;和每个classdiv的标题，因为有超过500 div。所以我需要一个jquery的解决方案，即cab添加数据肘节=＆＃34;提示＆＃34;到每个classdiv，并将值转换为title。

此外，我如何将此文本更改为任何属性并分配此值为例 <div class="classdiv">11</div>到<div class="classdiv" val="11" ></div> 请帮忙。

Answer 1

您必须循环所有div并从div文本中设置各自的工具提示文本

尝试这个演示

// loop each classdiv and add data-toggle and title attributes
$('.classdiv').each(function(ndx, elem) {
    var $elem = $(elem);
    var text = $elem.text().trim();
    $elem.attr('title', text) // set title attribute
        .text('') // empty the text 
        .data('toggle', 'tooltip') // add data-toggle = tooltip
        .tooltip(); // activate bootstrap tooltip
})

.classdiv {
    width: initial;
    display: inline-block;
    margin: 45px 20px;
    padding: 10px;
    background: grey;
}

<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>
<div class="classdiv">11</div>
<div class="classdiv">22</div>
<div class="classdiv">33</div>
<div class="classdiv">44</div>
<div class="classdiv">55</div>
<div class="classdiv">66</div>

Answer 2

要将<div class="classdiv">11</div>内的文本更改为bootstrap中的工具提示，您需要使用

data-toggle="tooltip"

你的div中的

并将文本放在

中

title="<your text here>"

示例：

<div class="classdiv" data-toggle="tooltip" title="11"></div>

同样使用bootstrap的data-placement="top"属性，您可以将工具提示定位到顶部/底部/左/右。在这里看演示： https://jsfiddle.net/koyvnzc1/

希望有所帮助

Answer 3

这只是一行代码。请参阅小提琴here。

运行工具提示的脚本：

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

将您的div更改为以下内容：

<div class="classdiv" data-toggle="tooltip" title="Howdy! I'm a fckn tooltip" data-placement="bottom"></div>

如何在引导程序中将div文本更改为工具提示？

3 个答案: