Edgar Navasardyan Edgar Navasardyan - 5 months ago 8
jQuery Question

Adding tooltip to Bootstrap via JQuery

I am trying to add a standard tooltip to all elements in my DOM that have a certain class. Here's what I do:

HTML:



$(document).ready(function(){
add_standard_tooltips();
});


function add_standard_tooltips(){
$('.has_standard_tooltip').attr('data-toggle', 'tooltip');

// Add tooltip text specific to classes
$('.zeon-edit-pencil').attr('title', 'My Tooltip text');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'zeon-edit-pencil has_standard_tooltip'>Edgar
</div>





The code works fine with the only exception that the tooltip does not appear in Bootstrap style (black background and white text), it looks like standard html tooltip. What am I doing wrong here ?!

UPDATE 1:
I guess, there's no Bootstrap in the Stackoverflow code snippet tool, so I provide JSFiddle just in case

UPDATE 2:
Here's the original code in my project:



Answer

I updated your fiddle: jsfiddle.net/4354jy5v/1/

You forgot to init the tooltips

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

Just fyi: ensure that you always include bootstrap.js after jquery.js

Comments