Twitter Bootstrap Tooltips not working with prefix in css

Question

I just want to use Twitter's bootstrap styles within some specific container only. So I prefixed the css like the following.

All bootstrap classes got the prefix '.widget' prepended (eg '.widget article' and so on)

Now bootstrap's tooltips don't work anymore.

<a href="#" data-placement="top" rel="tooltip" href="#" data-original-title="Facebook">Facebook</a>

I suspect the Twitter's javascript requiring some class I might have overwritten.

Any hints?

Answer 1

Cause this is a old question i will use Twitter's Bootstrap v3.

You can use:

LESS namespacing to wrap all Bootstrap's code in your '.widget'. See also: How to namespace Twitter Bootstrap so styles don't conflict :

Less:

.widget
{
@import "bootstrap.less";
}

Now you will have to wrap your tooltip inside a .widget class. The javascript plugin use classes, but their function will be the same after wrapping. Elements still have class X. On the other hand this won't prevent the javascript also invoke on elements with the same class names outside your wrapper.

HTML:

<div class="widget">
<button title="" data-placement="right" data-toggle="tooltip" class="btn btn-warning" type="button" data-original-title="Tooltip on right">Tooltip on right</button>
</div>

javascript:

$('.widget button').tooltip();

See also: Twitter bootstrap 3 custom multiple theme's