I have a positioning issue with jQuery UI's tooltips. I would prefer to not use jQuery UI, but the project I'm working on already uses it throughout and it's been requested I try and make use of it, rather than integrating my preferred option, qTip2.
When the tooltip appears, it causes a vertical scrollbar. I am positioning the tooltip centrally above the target and it's as I want it, excluding this issue.
$(function() {
$( document ).tooltip({
show: false,
hide: false,
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
I can see that the tooltip is being positioned at top:-600px which I assume is what is causing the scrollbar to appear.
I've tried changing / removing the positioning of the tooltip, but it didn't have any effect. I have tried removing parts of the CSS to pinpoint the problem and it seems related to the padding (any) or height (min, max or fixed).
Although removing padding and height fixes the issue, it obviously leaves the tooltip looking a bit ... Skinny. I would like to work out what the problem is and a way around it, so I can style the tooltip.
My current CSS (including the height and padding which I can see causes the issue) is as follows (there are also styles set for the arrows, which I've omitted as I can see they're not causing any problems):
.ui-tooltip {
z-index:10;
width:150px;
padding:10px;
min-height:20px;
max-width:100%;
font-size:0.875em;
text-align:center;
border-radius: 20px;
color:#707070;
background:#fffdc2 url(../img/fade.png) repeat-x;
font-family: 'Droid Sans', sans-serif;
text-shadow: 1px 1px #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #e1e0aa;}
I know jQuery UI have an open issue about connectors, so I've tested it without any positioning settings and it made no difference to this.
I have seen this issue mentioned a few times, but it wasn't relevant as I do not have qTip, or anything else included.
I've set up a JS fiddle here.
I'd appreciate any help or advice.
Thanks!