Search code examples
csstwitter-bootstraptooltip

Changing the position of a specific tooltip

I'm using Twitter Bootstrap and their tooltips and have a similar question as this one, i.e. I want to change position of a tooltip.

However, in my case I don't want to change the position of all tooltips but just the one below (I want to move the tooltip 30px to the left).

<i data-placement="left" title="{% trans "View the tool menu" %}" data-original-title="{% trans "View the tool menu" %}"
class='tooltip-hover menu-handle sprite-io sprite-control2'></i>

http://i.imgur.com/5XJEKbL.png

How could that be done?

Solution

  • This changes position for all the tooltips that are placed to the left.

    [data-placement=left] + .tooltip .tooltip-inner, 
[data-placement=left] + .tooltip .tooltip-arrow { margin-right:30px; }

    If you want to only change for this element, give it a class or id. ex: 

    #dummy + .tooltip .tooltip-inner, 
#dummy + .tooltip .tooltip-arrow { margin-right:30px; }