library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Tooltip: Fix nested tooltips (on hover) by closing parent tooltips and removing title attributes. Fixes #8700 - Overlapping tooltipped elements shows native tooltip for one of the elements

Browse Source
This commit is contained in:
Jörn Zaefferer 2012-10-19 20:58:08 -04:00
parent 9d5f91ece2
commit 77a55f1291
2 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
tests/visual/tooltip/tooltip.html
View File

@ -140,10 +140,14 @@
<div class="group" style="width: 300px;">
<p>Nested elements.</p>
<div id="context2">
<div title="something else" style="border:1px solid red;">
<div title="nested parent" style="border:1px solid red;">
tooltipped
<span title="something more" style="border:1px solid green; padding-left: 50px;">nested tooltipped</span>
<span title="nested child" style="border:1px solid green; padding-left: 25px;">
nested tooltipped
<span title="nested nested child" style="border:1px solid blue; padding-left: 25px;">third level</span>
</span>
</div>
<input title="nested input title">
</div>
<div id="childish" style="border: 1px solid black;" title="element with child elements">
Text in <strong>bold</strong>.

38
ui/jquery.ui.tooltip.js vendored
View File

@ -73,6 +73,8 @@ $.widget( "ui.tooltip", {
// IDs of generated tooltips, needed for destroy
this.tooltips = {};
// IDs of parent tooltips where we removed the title attribute
this.parents = {};
},
_setOption: function( key, value ) {
@ -126,10 +128,11 @@ $.widget( "ui.tooltip", {
},
open: function( event ) {
var target = $( event ? event.target : this.element )
// we need closest here due to mouseover bubbling,
// but always pointing at the same event target
.closest( this.options.items );
var that = this,
target = $( event ? event.target : this.element )
// we need closest here due to mouseover bubbling,
// but always pointing at the same event target
.closest( this.options.items );
// No element to show a tooltip for
if ( !target.length ) {
@ -154,6 +157,26 @@ $.widget( "ui.tooltip", {
target.data( "tooltip-open", true );
// kill parent tooltips, custom or native, for hover
if ( event && event.type === "mouseover" ) {
target.parents().each(function() {
var blurEvent;
if ( $( this ).data( "tooltip-open" ) ) {
blurEvent = $.Event( "blur" );
blurEvent.target = blurEvent.currentTarget = this;
that.close( blurEvent, true );
}
if ( this.title ) {
$( this ).uniqueId();
that.parents[ this.id ] = {
element: this,
title: this.title
};
this.title = "";
}
});
}
this._updateContent( target, event );
},
@ -289,6 +312,13 @@ $.widget( "ui.tooltip", {
this._off( target, "mouseleave focusout keyup" );
this._off( this.document, "mousemove" );
if ( event && event.type === "mouseleave" ) {
$.each( this.parents, function( id, parent ) {
parent.element.title = parent.title;
delete that.parents[ id ];
});
}
this.closing = true;
this._trigger( "close", event, { tooltip: tooltip } );
this.closing = false;