Edgar Navasardyan Edgar Navasardyan - 1 year ago 145
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:



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

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 ?!

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

Here's the original code in my project:

Answer Source

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

You forgot to init the tooltips


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download