jQuery UI tooltip positioning issue

Question

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!

Answer 1

If I understand correctly what you describe as the problem, the vertical scrollbar is added because an extra div ("#ui-tooltip-XX") is appended to the document's body with position: relative, which takes up extra space increasing the body's scrollHeight property (and causing the scrollbar to appear). If this is "compatible" with the rest of your HTML (which I don't have in my disposal to test), you can circumvent this issue by setting the tooltip's position attribute to absolute (which does not contribute to its container's overall height.

// Add this in your CSS
.ui-tooltip, .arrow:after {
    position: absolute;
    ....

(Based on the rest of the HTML on your page, additonal modifications might be necessary.)

See, also, this short demo.

Answer 2

For my app (which has tooltips in cells in a jQuery DataTable within nested jQuery Tabs), just setting 'position: absolute' wasn't enough - I also had to give the tooltips an initial onscreen top and left position as it only gets positioned after creation:

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px;
}