Menu
My layout has a sidebar on the left, and a content section on the right. Both sides have their own scroll bar and should take up the remaining height of the page.
My problem is that when I set overflow-y: auto so that I can have the scrollbar, the tooltip (from Bootstrap 3) gets clipped if it leaves the containing div.
Here is a fiddle to demonstrate the problem: http://jsfiddle.net/Ljy1nc3v/3/
Setting z-index on the content class and even the tooltip class doesn't work.
Any help would be appreciated, thanks.
440
The difference For that, you need overflow: auto , which lets a browser automatically determine if a scroll bar is needed — or not. So in short: overflow: scroll : Always show a scroll bar. overflow: auto : Show a scroll bar when needed.
Enabling sticky tooltip To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .
overflow: auto The auto value is similar to scroll , but it adds scrollbars only when necessary: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.
The easiest way to fix this is to set a container attribute on your tooltip like this:
$(".tt").tooltip({
placement: "top",
title: "<h3>this is a test tooltip</h3>",
html: true,
container: 'body'
});
This will append your tooltip to the body element rather than .content div.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
