How to Change div text to tooltip in bootstrap?

Question

this is my 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 ). So that user cannot see the div's text first .When he hover this , text appear in tool tip . 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 . so i need a solution in jquery , that cab add data-toggle="tooltip" to every classdiv, and convert value to 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.

Answer 1

You will have to loop all divs and set their respective tooltip text from the div text

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> 

Answer 2

For changing the text inside <div class="classdiv">11</div> to tooltip in bootstrap you need to use

data-toggle="tooltip" 

in your div and place the text inside

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. See demo here: https://jsfiddle.net/koyvnzc1/

Hope it helps

Answer 3

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