CODEWITHSUNDEEP
jqueryjquery-uitooltippositioning
CMH
CMH

Reputation: 738

JQuery UI tooltip collision positioning issue

I've created a tooltip (using JQuery UI) with a connector for an image. Fiddle is here

http://jsfiddle.net/FRAtC/

$(document).tooltip({ 
    position: { my: "left bottom-5", at: "left top",
    using: function( position, feedback ) {
        $( this ).css( position );
        $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
},
show: false,
hide: false 
});

The tooltip on the bottom image, when a collision is not detected, looks great. But when a collision is detected (top image), the tooltip flips to the bottom, but the positioning of the arrow is wrong.

I'm new to the Positioning element. How would I ensure that when the tooltip flips, it stays together and lines up with the image's bottom as it lines up with the top?

Thanks!

Upvotes: 1

Views: 3041

Answers (1)

PSL
PSL

Reputation: 123739

Just add margin-top:10px to the following rule. so that arrow gets stuck to the tootip block section.

.arrow.top {
    top: -16px;
    bottom: auto;
    margin-top:10px; /*This one*/
}

Fiddle

Upvotes: 1

Related Questions