Adding tooltip to Bootstrap via JQuery

Question

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:

pleinx · Accepted Answer · 2016-06-30 11:09:05Z

3

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

answered Jun 30, 2016 at 11:09

pleinx

6263 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Edgar Navasardyan Over a year ago

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 Over a year ago

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

pleinx Over a year ago

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:"

Edgar Navasardyan Over a year ago

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 )

pleinx Over a year ago

alright :) maybe take a look here stackoverflow.com/questions/13731400/… i know its with jquery-ui but maybe the solutions also works with small modifications on vanilla-js

|

Collectives™ on Stack Overflow

Adding tooltip to Bootstrap via JQuery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related