Detecting overflow with qTip2
I'm trying to prevent a tooltip from going off the end of a page. I'm using the qTip jQuery plugin, and having some issues. The default positioning is position: absolute;
and I need to set i开发者_JS百科t to position: relative;
to get it to react properly to overflow: hidden;
What it's supposed to do is automatically detect if it's going to go outside the div, and if it is, display in a different way so it doesn't get hidden. This solution on the qTip site explains this http://craigsworks.com/projects/qtip2/docs/position/#container, but I can't figure out how to get qTip to display properly without positoin: absolute;
How do I fix this?
I'm not exactly sure what you need to do based on your question and it's not clear to me why you'd want to override qTip's positioning. Perhaps if you posted some sample code or link to a sample someone could give you a better answer.
However, unless I'm missing something, it sounds like all you really need to do is define the viewport as the window. For example:
$('.selector').qtip({
position: {
viewport: $(window)
}
});
The workaround I did was just to put the arrow on the opposite corner, so the tooltip shows up on the inside of the page. Problem's not "fixed" persay, but it works.
精彩评论