Blog



Bootstrap Tooltips and Popovers hidden in accordion

I had a series of Bootstrap tooltips and popovers hidden in accordion-body as it was cut-off by the css overflow:hidden of the .collapse

Unfortunately I started to look into that issue and tried various options using jquery and css to overcome this overflow.
Each time I was testing, I was fixing a problem but creating a new one at the same time.

After hours looking around I finally found something that was worth my while… Not rocket science either… I simply read the documentation on Twitter Boostrap website!!!

How to show Twitter Bootstrap tooltips and popovers hidden in accordion

Simply add data-container=”body” on the actual tooltip or popover. As mentioned in the doc, it’s important to set the body container of the tooltips and popovers to insure their proper display…

<a href="#" data-toggle="popover" data-placement="top" data-content="This tooltip will show above the accordion" title="Popover" data-container="body">Working Popover</a>

For further help, check this jsfiddle



IT Support Newcastle is brought to you by Transcendit Ltd, contact us on 0191 482 0444