View Full Version : ToolTip on a link, still shows while you're inside it, hides when you mouse out

20 Aug 2009, 5:24 PM
Looking for some pointers before diving into this further. I've read through the api and source for ToolTip. Not sure where to go from here.

Here's what I have working in the example below:
* mouse over a link
* a tooltip appears anchored to the link

Need to add this:
* as you leave the link the tooltip stays displayed briefly so you have time to mouse into it
* while moused inside the tooltip it stays displayed
* when you mouse out, it hides

Any pointers?

Thanks in advance!

// in your html: <div>Hover over this link: <a href="#" id="hoverOverMe">A link</a></div>


var someHtml = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p><br/>';

var qtip = '<div style="padding: 5px; padding-bottom: 10px;">' +
' <div style="padding: 5px;"><span style="font-weight: bold;">Fancy ToolTip</span></div>' +
' <div style="background-color: #fff; padding: 5px;">' +
' <div>' + someHtml + '</div><br/>' +
' <div><a href="#">Just try and click me!</a></div><br/>' +
' </div>' +

new Ext.ToolTip({
target: 'hoverOverMe',
anchor: 'top',
html: qtip,
width: 415,
heiht: 550,
autoHide: true,
closable: false


20 Aug 2009, 11:33 PM
You will have to add mouseenter and mouseleave listeners to the ToolTip's Element and record whether the mouse is in the ToolTip.

Then, in a beforehide listener on the ToolTip, veto the hide if the mouse is in the ToolTip, and set a flag in it so that the mouseleave listener hides it next time the mouse leaves it.

21 Aug 2009, 12:50 PM
Thanks Animal, that's exactly what I needed.

If anyone else is interested here's the finished extension that does what I was describing:


* @class Ext.ux.MouseableToolTip
* @extends Ext.ToolTip
* A tooltip that continues to display when you mouse into it and hides when you mouse out
* @constructor
* @param {Object} config Configuration options
Ext.ux.MouseableToolTip = function(config) {
Ext.ux.MouseableToolTip.superclass.constructor.call(this, config);

Ext.extend(Ext.ux.MouseableToolTip, Ext.ToolTip, {
// this is important, some use cases don't give you enough time to mouse into the tooltip before it hides
hideDelay: 500,
mouseIn: false,

* after rendering, listen for when the mouse is in and out of the tooltip
render: function() {
Ext.ux.MouseableToolTip.superclass.render.apply(this, arguments);
this.mon(this.getEl(), 'mouseenter', this.onMouseEnter, this);
this.mon(this.getEl(), 'mouseleave', this.onMouseLeave, this);

* only hide when you're not in the tooltip
* @return {Ext.Component} this
hide: function() {
if (!this.mouseIn) {
Ext.ux.MouseableToolTip.superclass.hide.apply(this, arguments);
return this;

* record that the mouse has entered the tooltip so we know not to hide it once you've moused away from the target
* @param {Object} tip
onMouseEnter: function(tip) {
this.mouseIn = true;

* when the mouse leaves, hide the tooltip
* @param {Object} tip
onMouseLeave: function(tip) {
this.mouseIn = false;
Ext.ux.MouseableToolTip.superclass.hide.apply(this, arguments);