3

I'm trying to get red tooltips of instead of the default black, by implementing inline style of the template option of the tooltip as follows: 

$(document).ready(function(){
        options = {
          container: 'body',
          placement: 'right',
          template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow" style="color: red; border-color: red;"></div><div class="tooltip-inner" style="background-color: red;"></div></div>'
        };
        $('#lnk').tooltip(options);
      });

However, according to this demo, the triangle shape of the arrow is distorted and becomes a square.

How could I, simply, solve this issue using the inline styling in the tooltip's template?

SaidbakR
  • 13,303
  • 20
  • 101
  • 195
  • Possible duplicate of [Styling the arrow on bootstrap tooltips](http://stackoverflow.com/questions/15383440/styling-the-arrow-on-bootstrap-tooltips) – vishnu Jul 09 '16 at 07:41
  • look at this answer: http://stackoverflow.com/a/38279489/3554107. For styling each directional arrows, we have to select each arrow using CSS attribute selector and then style them individually. – vishnu Jul 09 '16 at 07:41

1 Answers1

5

Change the border-color: red; to border-right-color: red;

Wild Beard
  • 2,919
  • 1
  • 12
  • 24
  • Thank you very much. I already, tried `border-bottom-color` However, it seems to depend on the placement property of the tooltip. – SaidbakR Jan 22 '15 at 21:55