Bootstrap tooltips arrow color

Question

I'm trying to get red tooltips of twitter-bootstrap 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?

Answer 1

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