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;"> <div class="group" style="width: 300px;">
<p>Nested elements.</p> <p>Nested elements.</p>
<div id="context2"> <div id="context2">
<div title="something else" style="border:1px solid red;"> <div title="nested parent" style="border:1px solid red;">
tooltipped 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> </div>
<input title="nested input title">
</div> </div>
<div id="childish" style="border: 1px solid black;" title="element with child elements"> <div id="childish" style="border: 1px solid black;" title="element with child elements">
Text in <strong>bold</strong>. 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 // IDs of generated tooltips, needed for destroy
this.tooltips = {}; this.tooltips = {};
// IDs of parent tooltips where we removed the title attribute
this.parents = {};
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
@ -126,10 +128,11 @@ $.widget( "ui.tooltip", {
}, },
open: function( event ) { open: function( event ) {
var target = $( event ? event.target : this.element ) var that = this,
// we need closest here due to mouseover bubbling, target = $( event ? event.target : this.element )
// but always pointing at the same event target // we need closest here due to mouseover bubbling,
.closest( this.options.items ); // but always pointing at the same event target
.closest( this.options.items );
// No element to show a tooltip for // No element to show a tooltip for
if ( !target.length ) { if ( !target.length ) {
@ -154,6 +157,26 @@ $.widget( "ui.tooltip", {
target.data( "tooltip-open", true ); 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 ); this._updateContent( target, event );
}, },
@ -289,6 +312,13 @@ $.widget( "ui.tooltip", {
this._off( target, "mouseleave focusout keyup" ); this._off( target, "mouseleave focusout keyup" );
this._off( this.document, "mousemove" ); 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.closing = true;
this._trigger( "close", event, { tooltip: tooltip } ); this._trigger( "close", event, { tooltip: tooltip } );
this.closing = false; this.closing = false;