Change Bootstrap tooltip color

Question

What I m trying to do is change the tooltip color to red  However  I also want to have multiple other colors so I don t simply want to replace the original tooltip s color   How would I go about doing this

User · Answer

For the arrow color  you can use this    tooltip  tooltip-arrow  border-top  5px solid red  important

User · Answer

You can use the quickapproach mentioned in other answers if you just want to change color  However if you are using Bootstrap than you should use themes so that look and feel is consistent  Unfortunately there is no built-in support for themes for Bootstrap so I wrote little piece of CSS that does this  You basically get tooltip-info  tooltip-warning etc classes that you can add to the element to apply theme   You can find this code along with fiddle  examples and more explanation in this answer  https   stackoverflow com a 20880312 207661

User · Answer

For the arrow  first confirm that which direction you are using  For example  i am using left direction  then it should be   tooltip  tooltip-inner       background-color  2fa5fb     tooltip left  gt   tooltip-arrow      border-left-color   2fa5fb

User · Answer

for Bootstrap 4 version via CSS   if you want to change the background color of balloon      change style balloon     tooltip-inner       background-color  green  important      color   fff      if you want to change the arrow when appear in bottom position      change style arrow     bs-tooltip-auto x-placement  bottom   arrow  before   bs-tooltip-bottom  arrow  before       border-bottom-color   f00      Hope help you

User · Answer

This is already been answered right but i think i should give my opinion too  Like cozen says this is a border  and for it to work you must specify the classes to format this in the same way that bootstrap specifies it  So  you can do this    tooltip  tooltip-inner  background-color   00a8c4  color  black     tooltip top  tooltip-arrow  border-top-color   00a8c4     or you can do the next one  just for the tooltip-arrow but you must add the  important  so that it overwrites the bootstrap css   tooltip-arrow  border-top-color   00a8c4 important

User · Answer

In Bootstrap 3  not tested in 4  you can override default colors with using a template when creating the tooltip  With this method you can specify tooltip colors runtime  var bgColor     dd0000     red var textColor     ffffff     white      yourControlId   tooltip       placement   quot top quot       template    lt div class  quot tooltip quot  role  quot tooltip quot  gt  lt div class  quot tooltip-arrow quot  style  quot border-top-color     bgColor      quot  gt  lt  div gt  lt div class  quot tooltip-inner quot  style  quot background-color     bgColor     color     textColor      quot  gt  lt  div gt  lt  div gt        The template is based on original tooltip template  I only added the color styles  The placement must be top  because of arrow styling   I haven t tried other placement types

User · Answer

You can use this way   And in the CSS    tooltip-arrow   red-tooltip    tooltip  gt   tooltip-inner  background-color   000

User · Answer

For Bootstrap 4 with dependency on tether js the  tooltip-arrow classes have been replaced with  tooltip bs-tether-element-attached- position          Here is how I changed color and thickened bottom arrow   For every pixel added to border-width  I had to subtract a pixel from  bottom  position     tooltip bs-tether-element-attached-bottom  tooltip-inner  before   tooltip tooltip-bottom  tooltip-inner  before        border-top-color   d19b3d  important      border-width  10px 10px 0      bottom  -5px      You ll have to adjust for other positions  i e  for  tooltip bs-tether-element-attached-left you would adjust border-right  and reposition if raising border-width by subtracting pixels from  left   etc

User · Answer

BootStrap 4   When using BootStrap 4 the tooltip is appended to the bottom of the body tag  If your tooltip is a child of another tag there is no way to target the tooltip using css   The only way I ve found that works is using the inserted bs tooltip event and adding a class to the inner div and the arrow   Then you can target the class in css       x000D   x000D     initialize tooltips x000D      data-toggle  tooltip     tooltip     x000D   x000D     Add the classes to the toolip when it is created x000D      data-toggle  tooltip     on  inserted bs tooltip  function      x000D      var thisClass     this  attr  class    x000D          tooltip-inner   addClass thisClass   x000D          arrow   addClass thisClass    -arrow    x000D      x000D     style the tooltip box and arrow based on your class   x000D   bs-tooltip-left  redTip   x000D      background-color  red  important x000D    x000D   bs-tooltip-left  redTip-arrow  before   x000D      border-left-color  red  important x000D    x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  integrity  sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  integrity  sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf nJGzIxFDsf4x0xIM B07jRM  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt p gt Show a red tooltip  lt a href     class  redTip  data-toggle  tooltip  data-placement  left  title  You Did It   gt Hover over me lt  a gt  lt  p gt  x000D   x000D   x000D

User · Answer

You can use this to solve your problem  I checked it in my project and it works fine     lt a class  btn btn-sm btn-success media-tooltip  href     data-toggle  tooltip  data-placement  bottom  title  Download Now  gt Download Now lt  a gt       media-tooltip    tooltip  tooltip-inner           font-size  14px           font-weight  700          color  rgb  37  207  187             border-width  1px          border-color  rgb  37  207  187            border-style  solid          background-color  rgb  219  242  239            padding  10px          border-radius  0              media-tooltip    tooltip  gt   tooltip-arrow display  none        media-tooltip    tooltip  tooltip-inner after   media-tooltip    tooltip  tooltip-inner before            bottom  89            left  50            border  solid transparent           content                height  0           width  0           position  absolute           pointer-events  none              media-tooltip    tooltip  tooltip-inner after           border-color  rgba 219  242  239  0           border-bottom-color   dbf2ef          border-width  10px          margin-left  -10px             media-tooltip    tooltip  tooltip-inner before           border-color  rgba 37  207  187  0           border-bottom-color   25cfbb          border-width  11px          margin-left  -11px

User · Answer

The only way working for me    x000D   x000D    document  ready function     x000D      initializing tooltip x000D        data-toggle  tooltip     tooltip    x000D      x000D   tooltip-inner   x000D    background-color   00acd6  important  x000D       important is not necessary if you place custom css at the end of your css calls  For the purpose of this demo  it seems to be required in SO snippet   x000D    color   fff  x000D    x000D   x000D   tooltip top  tooltip-arrow   x000D    border-top-color   00acd6  x000D    x000D   x000D   tooltip right  tooltip-arrow   x000D    border-right-color   00acd6  x000D    x000D   x000D   tooltip bottom  tooltip-arrow   x000D    border-bottom-color   00acd6  x000D    x000D   x000D   tooltip left  tooltip-arrow   x000D    border-left-color   00acd6  x000D    x000D   lt  --jQuery-- gt  x000D   lt script src  https   code jquery com jquery-3 2 1 min js  gt  lt  script gt  x000D   lt  --tether-- gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  gt  lt  script gt  x000D   lt  --Bootstrap-- gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  rel  stylesheet    gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt  --Tooltip Example-- gt  x000D   lt div style  padding 50px   gt  x000D     lt span class  fa-stack fa-lg  data-toggle  tooltip  data-placement  right  title  custom colored tooltip  gt hover over me x000D   lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This easy method works for me when i want to change the background color of the bootstrap tooltips   x000D   x000D    function              tooltips red-tooltip   tooltip   data  bs tooltip   tip   addClass  red-tooltip            tooltips red-tooltip   tooltip   data  tooltip   tip   addClass  red-tooltip        x000D   red-tooltip tooltip tooltip bottom  tooltip-arrow    red-tooltip tooltip tooltip bottom-left  tooltip-arrow   red-tooltip tooltip tooltip bottom-right  tooltip-arrow border-bottom-color  red    red-tooltip tooltip top  tooltip-arrow  border-top-color  red    red-tooltip tooltip left  tooltip-arrow  border-left-color  red    red-tooltip tooltip right  tooltip-arrow  border-right-color  red    red-tooltip tooltip  gt   tooltip-inner background-color red   x000D   lt link href  http   getbootstrap com 2 3 2 assets css bootstrap css  rel  stylesheet   gt   lt script src  https   ajax googleapis com ajax libs jquery 1 9 0 jquery min js  gt  lt  script gt   lt script src  http   getbootstrap com 2 3 2 assets js bootstrap-tooltip js  gt  lt  script gt    lt a href     data-toggle  tooltip  data-placement  bottom     title    data-original-title  Made by  Ram     class  tooltips red-tooltip  gt My link with red tooltip lt  a gt  x000D   x000D   x000D    jsfiddle Live Demo   Note A  If js code include  data  tooltip   not working for you then please comment its line and uncomment js code include  data  bs-tooltip    Note B  If your bootstrap tooltip function add a tooltip to the end of body  not right after the element   my solution works well yet but some other answers in this pages did not works like  Praveen Kumar and  technoTarek in this scenario  Note C  This codes support tooltip arrow color in all placements of the tooltip  top bottom left right

User · Answer

This worked for me     tooltip  arrow before       border-top-color   008ec3  important      tooltip  tooltip-inner       background-color   008ec3

User · Answer

x000D   x000D    document  ready function    x000D        tooltips-elements   x000D       tooltip   x000D       each function     x000D          var color     this  data  color    x000D            this  hover function    x000D           var aria     this  attr  aria-describedby    x000D                   aria  find   tooltip-inner   css   x000D             background   color  x000D             color      333   x000D             margin-left     10px   x000D             font-weight     700   x000D             font-family     Open Sans   x000D             font-size     13px   x000D               x000D                   aria  find   tooltip-arrow   css   x000D             border-bottom-color    color  x000D               x000D              x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   lt a href     class  tooltips-elements  data-toggle  tooltip   data-placement  bottom  data-original-title  Here comes the tooltip  data-color  red  gt Hover me lt  a gt  x000D   x000D   x000D    Check this maybe it can help you  You can have multiple tooltips color

User · Answer

Bootstrap 3   SASS for bottom tooltip      red-tooltip        amp     tooltip bottom              tooltip-inner background-color  red              tooltip-arrow  border-bottom-color   red

User · Answer

The arrow is a border  You need to change for each arrow the color corresponding    tooltip top  tooltip-arrow     border-top-color   color     tooltip top-left  tooltip-arrow     border-top-color   color     tooltip top-right  tooltip-arrow     border-top-color  color     tooltip right  tooltip-arrow     border-right-color   color     tooltip left  tooltip-arrow     border-left-color   color     tooltip bottom  tooltip-arrow     border-bottom-color   color     tooltip bottom-left  tooltip-arrow     border-bottom-color   color     tooltip bottom-right  tooltip-arrow     border-bottom-color   color     tooltip  gt   tooltip-inner     background-color   color    font-size   font-size-small      However If i want to add a class to change the color  like in the fiddle with   class    tooltip     it doesn t work  bootstrap 3   If someone know how to handle that

User · Answer

You can use this way    lt a href     data-toggle  tooltip  data-placement  bottom     title    data-original-title  Tooltip on bottom     class  red-tooltip  gt Tooltip on bottom lt  a gt    And in the CSS    tooltip-arrow   red-tooltip    tooltip  gt   tooltip-inner  background-color   f00     jsFiddle    Moeen MH  With the most recent version of bootstrap  you may need to do this in order to get rid of black arrow    red-tooltip    tooltip top  gt   tooltip-arrow  background-color   f00       Use this for Bootstrap 4    bs-tooltip-auto x-placement  bottom   arrow  before   bs-tooltip-bottom  arrow  before     border-bottom-color   f00     Red        Full Snippet    x000D   x000D    function     x000D        data-toggle  tooltip     tooltip   x000D     x000D   tooltip-main   x000D    width  15px  x000D    height  15px  x000D    border-radius  50   x000D    font-weight  700  x000D    background   f3f3f3  x000D    border  1px solid  737373  x000D    color   737373  x000D    margin  4px 121px 0 5px  x000D    float  right  x000D    text-align  left  important  x000D    x000D   x000D   tooltip-qm   x000D    float  left  x000D    margin  -2px 0px 3px 4px  x000D    font-size  12px  x000D    x000D   x000D   tooltip-inner   x000D    max-width  236px  important  x000D    height  76px  x000D    font-size  12px  x000D    padding  10px 15px 10px 20px  x000D    background   FFFFFF  x000D    color  rgb 0  0  0   7   x000D    border  1px solid  737373  x000D    text-align  left  x000D    x000D   x000D   tooltip show   x000D    opacity  1  x000D    x000D   x000D   bs-tooltip-auto x-placement  bottom   arrow  before  x000D   bs-tooltip-bottom  arrow  before   x000D    border-bottom-color   f00  x000D       Red    x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap bundle min js  gt  lt  script gt  x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet    gt  x000D   lt div class  tooltip-main  data-toggle  tooltip  data-placement  top  data-original-title  Hello world  gt  lt span class  tooltip-qm  gt   lt  span gt  lt  div gt  x000D   lt style gt  x000D     bs-tooltip-auto x-placement  bottom   arrow  before  x000D     bs-tooltip-bottom  arrow  before   x000D      border-bottom-color   f00  x000D         Red    x000D      x000D   lt  style gt  x000D   x000D   x000D

User · Answer

For bootstrap4 I used code   x000D   x000D      data-toggle  tooltip     tooltip    x000D   tooltip-inner     background-color   f00  important    color   f00      bs-tooltip-top  arrow  before   bs-tooltip-auto x-placement   top    arrow  before     border-top-color   f00  important      bs-tooltip-right  arrow  before   bs-tooltip-auto x-placement   right    arrow  before     border-right-color   f00  important       bs-tooltip-bottom  arrow  before   bs-tooltip-auto x-placement   bottom    arrow  before     border-bottom-color   f00  important       bs-tooltip-left  arrow  before   bs-tooltip-auto x-placement   left    arrow  before     border-left-color   f00  important    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet   gt   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  gt  lt  script gt      lt a title  This is an example  data-toggle  tooltip  gt Hover me lt  a gt  x000D   x000D   x000D

User · Answer

Here is tooltip code in boostrap      tooltip     position  absolute    z-index  1070    display  block    font-family   Helvetica Neue   Helvetica  Arial  sans-serif    font-size  12px    font-style  normal    font-weight  normal    line-height  1 42857143    text-align  left    text-align  start    text-decoration  none    text-shadow  none    text-transform  none    letter-spacing  normal    word-break  normal    word-spacing  normal    word-wrap  normal    white-space  normal    filter  alpha opacity 0     opacity  0     line-break  auto     tooltip in     filter  alpha opacity 90     opacity   9     tooltip top     padding  5px 0    margin-top  -3px     tooltip right     padding  0 5px    margin-left  3px     tooltip bottom     padding  5px 0    margin-top  3px     tooltip left     padding  0 5px    margin-left  -3px     tooltip-inner     max-width  200px    padding  3px 8px    color   fff    text-align  center    background-color   000    border-radius  4px     tooltip-arrow     position  absolute    width  0    height  0    border-color  transparent    border-style  solid     tooltip top  tooltip-arrow     bottom  0    left  50     margin-left  -5px    border-width  5px 5px 0    border-top-color   000     tooltip top-left  tooltip-arrow     right  5px    bottom  0    margin-bottom  -5px    border-width  5px 5px 0    border-top-color   000     tooltip top-right  tooltip-arrow     bottom  0    left  5px    margin-bottom  -5px    border-width  5px 5px 0    border-top-color   000     tooltip right  tooltip-arrow     top  50     left  0    margin-top  -5px    border-width  5px 5px 5px 0    border-right-color   000     tooltip left  tooltip-arrow     top  50     right  0    margin-top  -5px    border-width  5px 0 5px 5px    border-left-color   000     tooltip bottom  tooltip-arrow     top  0    left  50     margin-left  -5px    border-width  0 5px 5px    border-bottom-color   000     tooltip bottom-left  tooltip-arrow     top  0    right  5px    margin-top  -5px    border-width  0 5px 5px    border-bottom-color   000     tooltip bottom-right  tooltip-arrow     top  0    left  5px    margin-top  -5px    border-width  0 5px 5px    border-bottom-color   000

User · Answer

If you want to customize the tooltip as white background with black text  We can go through this  Here we are using tooltip with anchor tag  lt div id  container-light  class  tooltip-light  gt   lt a href  quot   quot  data-container   container-light  data-toggle  quot tooltip quot  title  quot Tooltip text quot  gt Hover     over me lt  a gt

User · Answer

Oleg s answer https   stackoverflow com a 42994192 9921853 is the best there  It allows to apply the tooltip styles to the dynamically created elements  However it doesn t work for Bootstrap 4  It should be slightly modified   Bootstrap 3     document  on  inserted bs tooltip   function e        var tooltip     e target  data  bs tooltip        tooltip  tip addClass   e target  data  tooltip-custom-class           Example  https   www bootply com UORR04ncTP  Bootstrap 4     document  on  inserted bs tooltip   function e        var tooltip     e target  data  bs tooltip          tooltip tip  addClass   e target  data  tooltip-custom-class           Example  https   jsfiddle net nsmcan naq530hx  Full Solution  Bootstrap 3   JS    document  on  inserted bs tooltip   function e        var tooltip     e target  data  bs tooltip        tooltip  tip addClass   e target  data  tooltip-custom-classes             body   tooltip        selector    title         html  true       HTML   lt h1 gt Test tooltip styling lt  h1 gt   lt div gt  lt span title  Long-long-long tooltip doesn t fit the single line  gt Hover over me 1 lt  span gt  lt  div gt   lt div gt  lt span data-tooltip-custom-classes  tooltip-left  data-container  body  title  Example  left aligned   lt br gt Tooltip doesn t fit the single line  and is not a sibling  gt Hover over me 2 lt  span gt  lt  div gt   lt div gt  lt span class  text-danger  data-tooltip-custom-classes  tooltip-large tooltip-left tooltip-danger  title  Example  left aligned   lt br gt This long text we want to have in the single line  gt Hover over me 3 lt  span gt  lt  div gt    CSS   tooltip tooltip-large  gt   tooltip-inner       max-width  300px     tooltip tooltip-left  gt   tooltip-inner       text-align  left      tooltip top tooltip-danger  gt   tooltip-arrow       border-top-color   d9534f     tooltip top-left tooltip-danger  gt   tooltip-arrow       border-top-color   d9534f     tooltip top-right tooltip-danger  gt   tooltip-arrow       border-top-color  d9534f     tooltip right tooltip-danger  gt   tooltip-arrow       border-right-color   d9534f     tooltip left tooltip-danger  gt   tooltip-arrow       border-left-color   d9534f     tooltip bottom tooltip-danger  gt   tooltip-arrow       border-bottom-color   d9534f     tooltip bottom-left tooltip-danger  gt   tooltip-arrow       border-bottom-color   d9534f     tooltip bottom-right tooltip-danger  gt   tooltip-arrow       border-bottom-color   d9534f     tooltip tooltip-danger  gt   tooltip-inner       background-color   d9534f

User · Answer

The only way working for me    tooltip bottom  tooltip-arrow      border-bottom-color  F00

User · Answer

Important to note  as of Bootstrap 4 you can customize these styles directly in your Bootstrap Sass variables file  so in  variables scss you have these options        Tooltips                Tooltip max width  tooltip-max-width            200px  default        Tooltip text color  tooltip-color                 fff  default        Tooltip background color  tooltip-bg                    000  default   tooltip-opacity               9  default         Tooltip arrow width  tooltip-arrow-width          5px  default        Tooltip arrow color  tooltip-arrow-color           tooltip-bg  default    See here  http   v4-alpha getbootstrap com getting-started options   Best to work in Sass and compile as you go with Grunt or Gulp build tools

User · Answer

It will change the color of the tooltip in bootstrap4 you can use bottom     left  right to add CSS for respective in place of top in  bs-tooltip-top   tooltip-inner   background-color   00acd6  important  color   fff     bs-tooltip-top  arrow  before   bs-tooltip-auto x-placement   top     arrow  before   border-top-color   00acd6

User · Answer

This is true solution         tooltip        font-family  inherit       tooltip-inner        background-color   5264e9      bs-tooltip-auto x-placement  bottom   arrow  before   bs-tooltip-bottom  arrow  before        border-bottom-color   5264e9

User · Answer

We are using bootstrap 3 0 on our website  but none of the above steps worked in updating the styling of the tooltip  But I did find a solution using jQueryUI styling instead  https   jqueryui com tooltip  custom-style  CSS     ui-tooltip   arrow after       background  black      border  2px solid white         ui-tooltip       padding  10px 20px      color  white      border-radius  20px      font  bold 14px  Helvetica Neue   Sans-Serif      text-transform  uppercase      box-shadow  0 0 7px black        HTML   lt div class  qu help  data-toggle  tooltip  title  Some Random Title  gt       lt span class  glyphicon glyphicon-question-sign  aria-hidden  true  gt  lt  span gt   lt  div gt    I m adding this answer in case someone else is in a similar situation as I was

User · Answer

Bootstrap 2  If you want to change the caret arrow as well  do the following    red-tooltip    tooltip  gt   tooltip-inner  background-color   f00    red-tooltip    tooltip  gt   tooltip-arrow  border-bottom-color   f00     or   red-tooltip    tooltip  gt   tooltip-inner   red-tooltip    tooltip  gt   tooltip-arrow  background-color   f00     jsFiddle  http   jsfiddle net technotarek 2htZe   UPDATE  Bootstrap 3  You have to be specific for the direction of the tooltip in Bootstrap 3  For example    tooltip top  tooltip-inner       background-color red     tooltip top  tooltip-arrow         border-top-color  red      jsFiddle for all tooltip directions using Bootstrap 3  http   jsfiddle net technotarek L2rLE

User · Answer

If you want to use jQuery you can try this       data-toggle  tooltip     on  shown bs tooltip   function            tooltip bottom  tooltip-arrow   css  border-bottom-color    red            tooltip-inner   css  background-color    red

User · Answer

Here s a SCSS code  compiled css below  that will help you to easily control the tooltip colors  including the arrow  border and background for the arrow as well    Note  you might need to add  important  in some places in order for the CSS rules to take effect  Note  2  the style here only works for TOP and BOTTOM tooltip layouts  Feel free to add some more styling   amp  bs-tooltip-left   amp  bs-tooltip-right  etc   SCSS    tt-text-color  lime   tt-border-color  lime   tt-bg-color  black   arrow-border-color  lime   arrow-bg-color  black    tooltip      tooltip-inner       background   tt-bg-color      color   tt-text-color      border  2px solid  tt-border-color         arrow       width  11px      height  11px      border  2px solid  arrow-border-color      bottom  1px       amp  before         width  11px        height  11px        background   arrow-bg-color        border  0               amp  bs-tooltip-top        arrow         transform  rotate -135deg                amp  bs-tooltip-bottom        arrow         transform  rotate 135deg         top  2px                CSS    tooltip  tooltip-inner     background  black    color  lime    border  2px solid lime     tooltip  arrow     width  11px    height  11px    border  2px solid lime    bottom  1px     tooltip  arrow before     width  11px    height  11px    background  black    border  0     tooltip bs-tooltip-top  arrow     transform  rotate -135deg      tooltip bs-tooltip-bottom  arrow     transform  rotate 135deg     top  2px      Live Example    x000D   x000D  jQuery document  ready function    x000D      a   tooltip    x000D      x000D   tooltip  tooltip-inner   x000D    background  black  x000D    color  lime  x000D    border  2px solid lime  x000D    x000D   tooltip  arrow   x000D    width  11px important  x000D    height  11px important  x000D    border  2px solid lime  x000D    bottom  1px  x000D    x000D   tooltip  arrow before   x000D    width  11px  x000D    height  11px  x000D    background  black  x000D    border  0  x000D    x000D   tooltip bs-tooltip-top  arrow   x000D    transform  rotate -135deg   x000D    x000D   tooltip bs-tooltip-bottom  arrow   x000D    transform  rotate 135deg   x000D    top  2px  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 4 1 js bootstrap bundle min js  gt  lt  script gt  x000D   x000D   lt div class  text-center py-4  gt  x000D   lt a class  cn-box big cn-copy  data-toggle  tooltip  data-placement  bottom  title  Hello There  gt  x000D    try me x000D   lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Non of above answers works fine in case of container   body   and the following solution does      Assign custom CSS class after the tooltip template has been added to the DOM   document  on  inserted bs tooltip   function e        var tooltip     e target  data  bs tooltip        tooltip  tip addClass   e target  data  tooltip-custom-class           And a simple CSS snippet    tooltip tooltip-danger  gt   tooltip-inner       background-color   d9534f      tooltip tooltip-danger left  gt   tooltip-arrow       border-left-color   d9534f      Now you can init your tooltip as a usual  passing custom CSS class via data-tooltip-custom-class attribute    lt span class  js-tooltip  gt Hover me totally lt  span gt    lt script gt      js-tooltip        data  tooltip-custom-class    tooltip-danger        tooltip   your options       lt  script gt

User · Answer

Seems to have changed in Bootstrap 4  If you want to change color of a bottom placed tooltip in red  just add this to your CSS     tooltip-inner       background-color   f00      bs-tooltip-bottom  arrow  before       border-bottom-color   f00

User · Answer

my jQuery fix   HTML       lt a href     data-toggle  tooltip  data-placement  right  data-original-title  some text  gt          lt span class  glyphicon glyphicon-question-sign  gt  lt  span gt      lt  a gt    jQuery       data-toggle  tooltip     hover function            tooltip-inner   css  min-width    400px            tooltip-inner   css  color    red

User · Answer

Within your BS4 project  if you are able to compile SASS code  you can take advantage of creating a mixin to manage the color scheme of tooltips from any direction   Benefits of this approach    You don t have to add on additional javaScript jQuery for something that involves styling  You leverage SASS to dynamically handle the branding for you  You can easily control which tooltips have what color s  and direction s       Here s one of many ways in which you can implement this   Create your original mixin    Provide a variable for a color Set 2 parameters  one for the custom class name of your tooltip  and the other for the color    I also add default values for these parameters  optional   Create a list and loop over it to cover all 4 possible directions    define a color  m-color-blue   004c97     create a mixin with parameters and default value  mixin m-tooltip-color-direction  name   mtootltip    color  m-color-blue       reference your custom class name    name         tooltip-inner           background-color   color               create a list of possible directions      directions  top bottom left right         loop through the list      each  direction in  directions            amp  bs-tooltip-   direction   arrow before            bs-tooltip-auto x-placement    direction    arrow before               border-   direction -color   color  important                              Call your mixin  adjust class name and color    Within your main  scss file call your mixin like so    include m-tooltip-color-direction   mtooltip    m-color-blue        Set your BS4 Tooltip in your layout  adjust direction    Finally  add a BS4 tooltip to your layout  and give it a custom class for flexibility  This BS4 resource talks about using template as an option   We ll be using that to add our custom class  The following example adds a tooltip on an info icon badge     lt span class  badge badge-pill badge-primary  data-toggle  tooltip  data-placement  right  data-html  true  data-template   lt div class  tooltip mtooltip  role  tooltip  gt  lt div class  arrow  gt  lt  div gt  lt div class  tooltip-inner  gt  lt  div gt  lt  div gt   title   lt h1 class  text-white  gt Tooltip lt  h1 gt  on bottom  gt i lt  span gt       With this setup you can adjust the class name  color and direction of your tooltip without touching your original mixin   How cool is that     Hope this helps

[html] Change Bootstrap tooltip color

Examples related to html

Examples related to css

Examples related to twitter-bootstrap