Skip to content

Adding persistent tooltip #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brendean wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Adding persistent tooltip #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
51e426d
adding logic for persistent tooltips
brendean Nov 29, 2012
4a5ac4f
small cleanup for persistent tip
brendean Nov 29, 2012
30650d6
correcting and adding some additional tooltip tests
brendean Nov 30, 2012
7e00f7d
removing outline on tip example
brendean Dec 6, 2012
f06e1cb
Merge remote-tracking branch 'upstream/master'
brendean Dec 6, 2012
2733c88
adding tip back into grunt.js
brendean Dec 6, 2012
87ef370
updating to match new container data expected on load
brendean Dec 6, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions examples/tip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@
position: absolute;
width: 200px;
}
.tooltip:focus {
outline: 0;
}
</style>
</head>

Expand Down Expand Up @@ -74,6 +77,13 @@
Pastrami boudin pig, swine filet mignon venison flank chuck.
</div>
</li>
<li>
<a href="#persistent-example" data-lu="Tip" data-lu-config="{ 'Tip' : { 'persistent' : true } }">Persistent Tip.</a>
<div id="persistent-example" class="tip-contents">
Bresaola salami short loin tongue t-bone venison turkey fatback pancetta frankfurter swine hamburger.
<a href="#" class="close">close</a>
</div>
</li>
</ul>

<!-- Bootstrap:Util -->
Expand Down
2 changes: 1 addition & 1 deletion grunt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ module.exports = function(grunt) {
'http://localhost:1337/test/placeholder/placeholder.html',
'http://localhost:1337/test/$/$.html',
'http://localhost:1337/test/list/list.html',
//'http://localhost:1337/test/tip/tip.html',
'http://localhost:1337/test/tip/tip.html',
'http://localhost:1337/test/carousel/carousel.html',
'http://localhost:1337/test/dropdown/dropdown.html',
'http://localhost:1337/test/switch/switch.html',
Expand Down
79 changes: 52 additions & 27 deletions scripts/components/Tip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,14 @@ Tip = Abstract.extend( function (Abstract){
*/
className: 'tooltip',

/**
* Class of target that will close a persistent tip
* @property closeClass
* @type String
* @private
*/
closeClass: '.close',

/**
* CSS styles for the Tip
* @property style
Expand All @@ -94,13 +102,13 @@ Tip = Abstract.extend( function (Abstract){
style: '',

/**
* If set to true the tip will remain open until the mouse has left the tip.
* @property interactive
* If set to true the tip will remain open until the user clicks the close button or outside of the tip
* @property persistent
* @type Boolean
* @private
* @default true
*/
interactive: TRUE,
persistent: FALSE,

/**
* The buffer in pixels around the element to be used in determing if the user has stopped
Expand Down Expand Up @@ -160,21 +168,13 @@ Tip = Abstract.extend( function (Abstract){
*/
href,

/**
* An indicator of whether or not the tip should remain open
* @property stuck
* @type Boolean
* @private
*/
stuck,

/**
* Whether the element is an input or not
* @property isInput
* @type Boolean
* @private
*/
isInput = ($element[0].tagName.toLowerCase() === 'input'),
isInput = ( $element[0].tagName.toLowerCase() === 'input' ),

/**
* Array of decorators to apply to a Tip instance
Expand Down Expand Up @@ -241,8 +241,19 @@ Tip = Abstract.extend( function (Abstract){
function handleMouseEnter ( event ){
event.stopPropagation();

//set up a listener on the document to be used in determing if the user has moused out of the threshold
$document.on( 'mousemove.lu.tip', handleMouseMove );
if( !settings.persistent ) {
//set up a listener on the document to be used in determing if the user has moused out of the threshold
$document.on( 'mousemove.lu.tip', handleMouseMove );
} else {
// if the user clicks outside of a persistent tip close it
$document.on( 'click', function( evt) {
var $target = $( evt.target );

if( $target.closest( '.' + settings.className ).length === 0 ) {
self.hide();
}
} );
}
self.show();
}

Expand Down Expand Up @@ -297,11 +308,13 @@ Tip = Abstract.extend( function (Abstract){
function handleFocus( event ){
event.stopPropagation();

$element.on( 'blur.lu.tip', function( event ){
event.stopPropagation();
$element.off( 'blur.lu.tip' );
self.hide();
} );
if( !settings.persistent ) {
$element.on( 'blur.lu.tip', function( event ){
event.stopPropagation();
$element.off( 'blur.lu.tip' );
self.hide();
} );
}

self.show();
}
Expand All @@ -316,7 +329,7 @@ Tip = Abstract.extend( function (Abstract){
*/
this.show = function(){
if( rendered === FALSE ){
TipContainer.trigger( 'load', [href] );
TipContainer.trigger( 'load', { content: href } );
} else {
$tip.css( self.getPosition() );
$tip.show();
Expand All @@ -332,15 +345,18 @@ Tip = Abstract.extend( function (Abstract){
* @method hide
* @return {Void}
*/
this.hide = function(){
this.hide = function( noDelay ){
var timeout;

if( rendered === TRUE ){
timeout = window.setTimeout( function(){
if( !stuck || !settings.interactive ){
if( !noDelay ){
timeout = window.setTimeout( function(){
$tip.hide();
window.clearTimeout( timeout );
}
}, settings.delay );
}, settings.delay );
} else {
$tip.hide();
}
}
};

Expand Down Expand Up @@ -383,8 +399,17 @@ Tip = Abstract.extend( function (Abstract){
} else {
$element.on( 'focus', handleFocus );
}
// use losing focus on tip to enforce one tip at a time
$tip.on( 'blur', self.hide );

if( settings.persistent ) {
// close button for persistent tips
$tip.on( 'click', settings.closeClass, function( evt ) {
evt.preventDefault();
self.hide( true ); // close tip with no delay
} );
} else {
// use losing focus on tip to enforce one (non-persistent) tip at a time
$tip.on( 'blur', self.hide );
}

// === DECORATION ===
switch( settings.placement ){
Expand Down
112 changes: 83 additions & 29 deletions test/tip/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,92 @@ function execute(){
var mouseTipEl = $( '#mouse-tip' ),
mouseTipComponent = mouseTipEl.lu( 'getComponent', 'Tip' ),
inputTipEl = $( '#input-tip' ),
inputTipComponent = inputTipEl.lu( 'getComponent', 'Tip' );
inputTipComponent = inputTipEl.lu( 'getComponent', 'Tip' ),
persistentTipEl = $( '#persistent-tip' ),
persistentTipComponent = persistentTipEl.lu( 'getComponent', 'Tip' );

QUnit.module( 'Lu Tips' );
$.when.apply( $, [ mouseTipComponent.deferral,
inputTipComponent.deferral,
persistentTipComponent.deferral ] ).done( function () {

QUnit.asyncTest( 'Mouse triggered tip.' , function() {
mouseTipComponent.ready(function() {
QUnit.module( 'API Tests' );

test( 'Programmatic show', 1, function() {
mouseTipComponent.instance.show();
if( $( '.mouse-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is shown' );
}
} );

test( 'Programmatic getPosition', 1, function() {
var position = mouseTipComponent.instance.getPosition();

if( position.top && position.left ) {
ok( true, 'Postion object has correct attributes' );
}
} );

asyncTest( 'Programmatic hide', 1, function() {
mouseTipComponent.instance.hide();
setTimeout( function() {
if( !$( '.mouse-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is hidden' );
start();
}
}, 500 );
} );

QUnit.module( 'Interaction Tests' );

test( 'Mouse over show', 2, function() {
mouseTipEl.trigger( 'mouseenter' );
expect( 2 );
ok( $.trim( $( '.mouse-tip' ).html() ) === 'Fatback pork belly flank salami cow t-bone ground round pancetta short ribs jerky pig pork sausage.', 'Tip content is correct.' );
start();
$(document).trigger( 'mousemove' );
stop();
setTimeout(function() {
ok( $( '.mouse-tip' ).css('display') === 'none', 'Tip has been hidden.' );
start();
}, 300);
});
});

QUnit.asyncTest( 'Focus triggered tip.' , function() {
inputTipComponent.ready(function() {
ok( $.trim( $( '.mouse-tip' ).html() ) === 'Mouse tooltip content.', 'Tip content is correct.' );
if( $( '.mouse-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is shown' );
}
} );

asyncTest( 'Mouse leave hide', 1, function() {
$( document ).trigger( 'mousemove' );
setTimeout( function() {
if( !$( '.mouse-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is hidden' );
start();
}
}, 500 );
} );

test( 'Focus show', 2, function() {
inputTipEl.trigger( 'focus' );
expect( 2 );
ok( $.trim( $( '.input-tip' ).html() ) === 'Pastrami boudin pig, swine filet mignon venison flank chuck.', 'Tip content is correct.' );
start();
inputTipEl.trigger( 'blur' );
stop();
setTimeout(function() {
ok( $( '.input-tip' ).css( 'display' ) === 'none', 'Tip has been hidden.' );
start();
}, 300);
});
});
ok( $.trim( $( '.input-tip' ).html() ) === 'Input tooltip content.', 'Tip content is correct.' );
if( $( '.input-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is shown' );
}
} );

asyncTest( 'Blur hide', 1, function() {
$( inputTipEl ).trigger( 'blur' );
setTimeout( function() {
if( !$( '.input-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is hidden' );
start();
}
}, 500 );
} );

test( 'Show persistent tip', 1, function() {
persistentTipEl.trigger( 'mouseenter' );
if( $( '.persistent-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is shown' );
}
} );

test( 'Hide persistent tip (with close button)', 1, function() {
$( '.persistent-tip .close' ).trigger( 'click' );
if( !$( '.persistent-tip' ).is( ':visible' ) ) {
ok( true, 'Tip is hidden' );
}
} );

} );
}
23 changes: 21 additions & 2 deletions test/tip/tip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,17 @@
<meta charset="utf-8">
<title>Tip Tests</title>
<link rel="stylesheet" type="text/css" href="../qunit.css">
<style>
li {
padding: 20px 0;
}
.tooltip {
position: absolute;
}
.tip-contents {
display: none;
}
</style>
</head>

<body>
Expand All @@ -14,13 +25,21 @@
<li>
<a id="mouse-tip" href="#mouse-example" data-lu="Tip" data-lu-config="{ 'Tip' : { 'className' : 'tooltip mouse-tip' } }">Mouse Tip.</a>
<div id="mouse-example" class="tip-contents">
Fatback pork belly flank salami cow t-bone ground round pancetta short ribs jerky pig pork sausage.
Mouse tooltip content.
</div>
</li>
<li>
<input id="input-tip" href="#input-example" data-lu="Tip:Right" value="" placeholder="Click for tip." data-lu-config="{ 'Tip:Right' : { 'className' : 'tooltip input-tip' } }"/>
<div id="input-example" class="tip-contents">
Pastrami boudin pig, swine filet mignon venison flank chuck.
Input tooltip content.
</div>
</li>
<li>
<a id="persistent-tip" href="#persistent-example" data-lu="Tip" data-lu-config="{ 'Tip' : { 'persistent' : true,
'className' : 'tooltip persistent-tip' } }">Persistent Tip.</a>
<div id="persistent-example" class="tip-contents">
Persistent tooltip content.
<a href="#" class="close">Close</a>
</div>
</li>
</ul>
Expand Down