Align Bootstrap's tooltip to the left of the element?

Question

I am using Bootstrap's tooltip script and have a problem when I have the tooltip on text that gets truncated. I am using CSS to truncate the text, and then have a tooltip on that text so you can mouse over and see the full text. My problem is that when the text is truncated, the tooltip still centers on the element as if it wasn't truncated.

Aside from this issue, I'd just rather it be styled like the following anyway. I would like to have it so the tooltip aligns to the left of the element, and the arrow on the tooltip goes to the left as well. Or if the tooltip is on the side of the element then it gets aligned to the top and the arrow is on the top.

Basically it looks like this right now:

             ################
             # TOOLTIP      #
             ################
                    v
Some really long text th...

I would like it to look like this:

################
# TOOLTIP      #
################
 v
Some really long text th...

Or for on the side like this:

################ > Some really long text th...
# TOOLTIP      #
################

Thank you.

[EDIT] I've firgured out the moving of the arrow, that's just simple css. But the aligning of the tooltip itself seems to be part of the javascript.

Answer 1

To achieve the following layout:

          element
             ^
################
# TOOLTIP      #
################

CSS

.tooltip.bottom .tooltip-arrow {
  left: 90% !important;
}

JS

$('[data-toggle=tooltip]').on('inserted.bs.tooltip', function() {
  $('.tooltip').css('opacity', 0);
});

$(''[data-toggle=tooltip]'').on('shown.bs.tooltip', function() {
  var $tooltip = $('.tooltip');
  $tooltip.css('left', $tooltip.offset().left - $tooltip.width() / 2);
  $tooltip.css('opacity', 1);
});

There is a small delay due to hiding and showing the tooltip but the positioning works fine regardless of the tooltip size.

Answer 2

I think you'll need to adjust the tooltip-arrow CSS and the position of the entire tooltip. This will get you close to it, but it may need more tweaks...

.tooltip-arrow CSS

.tooltip.right .tooltip-arrow{
    top: 5%;
    margin-top: 0px;
}

.tooltip.top .tooltip-arrow{
    left: 6%;
    bottom:1px;
}

jQuery function to adjust placement of the tooltip..

$("[data-placement=right]").hover(function(){
    $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 8 + 'px')
});

Demo on Bootply

EDIT: You can also position the .tooltip with CSS only. Alternate demo

.tooltip.right {
    margin-top:8px;
}