[英]How to Change div text to tooltip in bootstrap?
this is my div 这是我的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>
i need to change this div text to tooltip using Jquery , because i can not change it manually , there are so many ( http://getbootstrap.com/javascript/#tooltips ). 我需要使用Jquery将此div文本更改为工具提示,因为我无法手动更改它,所以有很多( http://getbootstrap.com/javascript/#tooltips )。 So that user cannot see the div's text first .When he hover this , text appear in tool tip .
因此,该用户无法首先看到div的文本。将鼠标悬停在该文本上时,文本将显示在工具提示中。 I know how to make tool tip ,
我知道如何制作工具提示
<div class="classdiv" data-toggle="tooltip" data-placement="left" title="11">11</div>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
But here the problem is that i cannot add manually data-toggle="tooltip" and title to every classdiv, becuase there are more than 500 div .
但是这里的问题是我不能为每个classdiv手动添加data-toggle =“ tooltip”和标题,因为有超过500个div。 so i need a solution in jquery , that cab add data-toggle="tooltip" to every classdiv, and convert value to title.
所以我需要在jquery中的解决方案,cab将data-toggle =“ tooltip”添加到每个classdiv,并将值转换为title。
Also how i can change this text to any attribute and assign this value for example <div class="classdiv">11</div>
to <div class="classdiv" val="11" ></div>
Please help. 另外,我如何将文本更改为任何属性,并将此值(例如
<div class="classdiv">11</div>
分配给<div class="classdiv" val="11" ></div>
请帮助。
You will have to loop all divs and set their respective tooltip text from the div text 您将必须循环所有div并从div文本中设置其各自的工具提示文本
TRY THIS DEMO 试试这个演示
// 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>
For changing the text inside <div class="classdiv">11</div>
to tooltip in bootstrap you need to use <div class="classdiv">11</div>
的文本更改为引导程序中的工具提示,您需要使用
data-toggle="tooltip"
in your div and place the text inside 在您的div中并将文本放在里面
title="<your text here>"
Example: 例:
<div class="classdiv" data-toggle="tooltip" title="11"></div>
Also using data-placement="top"
property of bootstrap you can position your tooltip to top/bottom/left/right. 同样使用bootstrap的
data-placement="top"
属性,您可以将工具提示定位到top / bottom / left / right。 See demo here: https://jsfiddle.net/koyvnzc1/ 在此处查看演示: https : //jsfiddle.net/koyvnzc1/
Hope it helps 希望能帮助到你
This is just a single line of code. 这只是一行代码。 See fiddle here .
在这里看小提琴。
Script to run tooltip: 运行工具提示的脚本:
$('[data-toggle="tooltip"]').tooltip();
Change your div into something like below: 将您的div更改为如下所示:
<div class="classdiv" data-toggle="tooltip" title="Howdy! I'm a fckn tooltip" data-placement="bottom"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.