Styling the arrow on bootstrap tooltips

Question

I m trying to style tootltips using   tooltip-inner     But i m having troubles cause i can t find how to style tooltip small arrow   As shown on screenshot the arrow of the tooltip is black i want to add new color on that    any suggestion

User · Answer

This one worked for me    tooltip  tooltip-arrow   border-top  5px solid red  important

User · Answer

In case you are going around and around to figure this out and none of the options above are working  it is possible you are experiencing a name space conflict of  tooltip with bootstrap and jquery   See this answer on how to fix  jQueryUI Tooltips are competing with Twitter Bootstrap

User · Answer

For styling each directional arrows left  right top and bottom   we have to select each arrow using CSS attribute selector and then style them individually   Trick  Top arrow must have border color only on top side and transparent on other 3 sides  Other directional arrows also need to be styled this way   click here for Working Jsfiddle Link    Here is the simple CSS     tooltip-inner   background-color  8447cf     data-placement  top      tooltip  gt   tooltip-arrow   border-top-color   8447cf     data-placement  right      tooltip  gt   tooltip-arrow   border-right-color   8447cf     data-placement  bottom      tooltip  gt   tooltip-arrow  border-bottom-color   8447cf     data-placement  left      tooltip  gt   tooltip-arrow  border-left-color   8447cf

User · Answer

You can use this to change tooltip-arrow color   tooltip bottom  tooltip-arrow     top  0    left  50     margin-left  -5px    border-bottom-color   000000     black      border-width  0 5px 5px

User · Answer

The arrow is a border  You need to change for each arrow the color depending on the  data-placement  of the tooltip    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

User · Answer

If you want to style only the colors of the tooltips do as follow    tooltip-inner   background-color   000  color   fff     tooltip top  tooltip-arrow   border-top-color   000     tooltip right  tooltip-arrow   border-right-color   000     tooltip bottom  tooltip-arrow   border-bottom-color   000     tooltip left  tooltip-arrow   border-left-color   000

User · Answer

You can add  display  none   to  tooltip-arrow class   tooltip-arrow      display  none

User · Answer

You can always try putting this code in your main css without modifying the bootstrap file what is most recommended so you keep consistency if in a future you update the bootstrap file    tooltip-inner   background-color   FF0000      tooltip right  tooltip-arrow   border-right  5px solid  FF0000       Notice that this example is for a right tooltip  The tooltip-inner property changes the tooltip BG color  the other one changes the arrow color

User · Answer

I have created fiddle for you   Take a look at here   lt p gt       lt a class  tooltip  href     gt Tooltip          lt span gt               lt img alt  CSS Tooltip callout                   src  http   www menucool com tooltip src callout gif  class  callout  gt               lt strong gt Most Light-weight Tooltip lt  strong gt  lt br gt              This is the easy-to-use Tooltip driven purely by CSS           lt  span gt       lt  a gt   lt  p gt     nbsp    a tooltip       outline  none     a tooltip strong       line-height  30px     a tooltip hover       text-decoration  none     a tooltip span       z-index  10      display  none      padding  14px 20px      margin-top  -30px      margin-left  28px      width  240px      line-height  16px     a tooltip hover span       display  inline      position  absolute      color   111      border  1px solid  DCA      background   fffAF0      callout       z-index  20      position  absolute      top  30px      border  0      left  -12px      CSS3 extras   a tooltip span       border-radius  4px      -moz-border-radius  4px      -webkit-border-radius  4px      -moz-box-shadow  5px 5px 8px  CCC      -webkit-box-shadow  5px 5px 8px  CCC      box-shadow  5px 5px 8px  CCC

User · Answer

Use this style sheet to get you started     tooltip      position absolute      z-index 1020      display block      visibility visible      padding 5px      font-size 11px      opacity 0      filter alpha opacity 0     tooltip in      opacity  8      filter alpha opacity 80     tooltip top      margin-top -2px    tooltip right      margin-left 2px    tooltip bottom      margin-top 2px    tooltip left      margin-left -2px    tooltip top  tooltip-arrow      bottom 0      left 50       margin-left -5px      border-left 5px solid transparent      border-right 5px solid transparent      border-top 5px solid  000    tooltip left  tooltip-arrow      top 50       right 0      margin-top -5px      border-top 5px solid transparent      border-bottom 5px solid transparent      border-left 5px solid  000    tooltip bottom  tooltip-arrow      top 0      left 50       margin-left -5px      border-left 5px solid transparent      border-right 5px solid transparent      border-bottom 5px solid  000    tooltip right  tooltip-arrow      top 50       left 0      margin-top -5px      border-top 5px solid transparent      border-bottom 5px solid transparent      border-right 5px solid  000    tooltip-inner      max-width 200px      padding 3px 8px      color  fff      text-align center      text-decoration none      background-color  000      -webkit-border-radius 4px      -moz-border-radius 4px      border-radius 4px    tooltip-arrow      position absolute      width 0      height 0

[css] Styling the arrow on bootstrap tooltips

Examples related to css

Examples related to twitter-bootstrap

Examples related to tooltip