1

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:

Edgar Navasardyan
  • 4,261
  • 8
  • 58
  • 121

1 Answers1

2

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

pleinx
  • 616
  • 3
  • 8
  • pleinx, your jsFiddle seems to ok, so I ticked the question as sovled, but in my own project tooltip is again plain-vanilla instead of Boostrap-like – Edgar Navasardyan Jun 30 '16 at 11:23
  • I've added my original code in the asnwer. After modifying js as per your suggestion, I still get the plain-vanilla appearance ((( The jquery-ui.js is included before boostrap.js – Edgar Navasardyan Jun 30 '16 at 11:25
  • I cant find your original code, maybe forget to copy fiddle link? I see only "`UPDATE 2: Here's the original code in my project:`" – pleinx Jun 30 '16 at 11:34
  • pleinx, I can fill that I have two problems. The first one you solved in your asnwer ($('[data-toggle="tooltip"]').tooltip(); was missing in my code). And the second one is not related to this question-thread, so let us close this discussion. If I do not succeed to solve it, will ask in a new question ) – Edgar Navasardyan Jun 30 '16 at 14:31
  • alright :) maybe take a look here http://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap i know its with jquery-ui but maybe the solutions also works with small modifications on vanilla-js – pleinx Jun 30 '16 at 14:52