0

I wanted to change default style of the bootstrap's tooltip, and i was able to do that after following W3Schools article. That article as well as other SO post suggest to use something like below

/* Tooltip on top */
  .test + .tooltip.top > .tooltip-arrow {
      border-top: 5px solid green;
  }

which means i have to add test class on tooltip element. But i want all the tooltips to have same style so i decided not to add test class

My working JSFiddle is here

However, in order to get custom styling working i have to initialize toolips using javascript

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

If i remove this javascript, tooltips still works but does not show custom styling.

So tooltip works regardless if i initialize it using javascript or not, however custom styling only works if initialize it using javascript. Why?

Community
  • 1
  • 1
LP13
  • 30,567
  • 53
  • 217
  • 400

1 Answers1

0

From Boostrap - Tooltips:

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Community
  • 1
  • 1
Paulo Pereira
  • 1,064
  • 8
  • 16
  • but tooltip still works even if you dont opt-in. If we just add `title` attribute to any html element it shows tooltip without opt-in – LP13 Mar 01 '17 at 17:18
  • Tooltip is a default feature even without Bootstrap. The team of Bootstrap preferred to opt-in the use of a customization in 'tooltip' avoiding doing it automatically. – Paulo Pereira Mar 01 '17 at 17:29