Hover over the orange box and the link to see their Tooltips.
Hover over me to see a Tooltip!
The Tooltip Control is an extension of Overlay that is analogous to popup tooltips within common operating systems. The standard tooltip interaction pattern involves a small overlay that is displayed when the mouse hovers over a context element for a specified amount of time. Tooltip is designed to be simple to implement with easily-accessed configuration options and visual styling handled entirely via CSS.
Tooltips are instantiated by script and are rendered (and hidden) automatically when the window's load
event fires; unlike other controls in the Container family, no call to render
is required with Tooltip. Tooltip introduces several specific configuration properties:
In this tutorial, we'll create two Tooltips. The first will be associated with an element with an id of ctx
, and will have its text set explicitly. The second Tooltip will be associated with a link with an id of link
, but it will retrieve its text from the link's title
attribute:
1 | YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", |
2 | { context:"ctx", |
3 | text:"My text was set using the 'text' configuration property" }); |
4 | YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", { context:"link" }); |
view plain | print | ? |
The corresponding markup for the context elements for this tutorial looks like this:
1 | <div id="ctx">Hover over me to see a Tooltip!</div> |
2 | <a id="link" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!</a> |
view plain | print | ? |
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false, context=link, visible=false, constraintoviewport=true, iframe=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: constraintoviewport=true
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, constraintoviewport=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false, context=link, iframe=false, visible=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: visible=false
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false, context=link, iframe=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: context=link
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: disabled=false
INFO93ms (+0) 6:27:36 PM:Config
setProperty: disabled=false
INFO93ms (+0) 6:27:36 PM:Config
Added property: disabled
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement],
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: container=[object HTMLBodyElement]
INFO93ms (+0) 6:27:36 PM:Config
setProperty: container=[object HTMLBodyElement]
INFO93ms (+0) 6:27:36 PM:Config
Added property: container
INFO93ms (+0) 6:27:36 PM:Config
setProperty: text=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: text
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: hidedelay=250
INFO93ms (+0) 6:27:36 PM:Config
setProperty: hidedelay=250
INFO93ms (+0) 6:27:36 PM:Config
Added property: hidedelay
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: autodismissdelay=5000
INFO93ms (+0) 6:27:36 PM:Config
setProperty: autodismissdelay=5000
INFO93ms (+0) 6:27:36 PM:Config
Added property: autodismissdelay
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: showdelay=200
INFO93ms (+0) 6:27:36 PM:Config
setProperty: showdelay=200
INFO93ms (+0) 6:27:36 PM:Config
Added property: showdelay
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: preventoverlap=true
INFO93ms (+0) 6:27:36 PM:Config
setProperty: preventoverlap=true
INFO93ms (+0) 6:27:36 PM:Config
Added property: preventoverlap
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: iframe=false
INFO93ms (+0) 6:27:36 PM:Config
setProperty: iframe=false
INFO93ms (+0) 6:27:36 PM:Config
Added property: iframe
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, zindex=null, constraintoviewport=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: constraintoviewport=false
INFO93ms (+0) 6:27:36 PM:Config
setProperty: constraintoviewport=false
INFO93ms (+0) 6:27:36 PM:Config
Added property: constraintoviewport
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, zindex=null,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: zindex=null
INFO93ms (+0) 6:27:36 PM:Config
setProperty: zindex=null
INFO93ms (+0) 6:27:36 PM:Config
Added property: zindex
INFO93ms (+0) 6:27:36 PM:Config
setProperty: height=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: height
INFO93ms (+0) 6:27:36 PM:Config
setProperty: width=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: width
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: fixedcenter=false
INFO93ms (+0) 6:27:36 PM:Config
setProperty: fixedcenter=false
INFO93ms (+0) 6:27:36 PM:Config
Added property: fixedcenter
INFO93ms (+0) 6:27:36 PM:Config
setProperty: context=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: context
INFO93ms (+0) 6:27:36 PM:Config
setProperty: xy=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: xy
INFO93ms (+0) 6:27:36 PM:Config
setProperty: y=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: y
INFO93ms (+0) 6:27:36 PM:Config
setProperty: x=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: x
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: visible=true, monitorresize=true, appendtodocumentbody=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: appendtodocumentbody=false
INFO93ms (+0) 6:27:36 PM:Config
setProperty: appendtodocumentbody=false
INFO93ms (+0) 6:27:36 PM:Config
Added property: appendtodocumentbody
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: visible=true, monitorresize=true,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: monitorresize=true
INFO93ms (+0) 6:27:36 PM:Config
setProperty: monitorresize=true
INFO93ms (+0) 6:27:36 PM:Config
Added property: monitorresize
INFO93ms (+0) 6:27:36 PM:Config
setProperty: effect=undefined
INFO93ms (+0) 6:27:36 PM:Config
Added property: effect
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: visible=true,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: visible=true
INFO93ms (+0) 6:27:36 PM:Config
setProperty: visible=true
INFO93ms (+0) 6:27:36 PM:Config
Added property: visible
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false, context=ctx, text=My text was set using the 'text' configuration property, visible=false, constraintoviewport=true, iframe=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: constraintoviewport=true
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, constraintoviewport=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false, context=ctx, iframe=false, text=My text was set using the 'text' configuration property, visible=false,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: visible=false
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false, context=ctx, iframe=false, text=My text was set using the 'text' configuration property,
INFO93ms (+0) 6:27:36 PM:Config
queueProperty: text=My text was set using the 'text' configuration property
INFO93ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false, context=ctx, iframe=false,
INFO93ms (+1) 6:27:36 PM:Config
queueProperty: context=ctx
INFO92ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement], disabled=false,
INFO92ms (+0) 6:27:36 PM:Config
queueProperty: disabled=false
INFO92ms (+0) 6:27:36 PM:Config
setProperty: disabled=false
INFO92ms (+0) 6:27:36 PM:Config
Added property: disabled
INFO92ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250, container=[object HTMLBodyElement],
INFO92ms (+0) 6:27:36 PM:Config
queueProperty: container=[object HTMLBodyElement]
INFO92ms (+0) 6:27:36 PM:Config
setProperty: container=[object HTMLBodyElement]
INFO92ms (+0) 6:27:36 PM:Config
Added property: container
INFO92ms (+0) 6:27:36 PM:Config
setProperty: text=undefined
INFO92ms (+0) 6:27:36 PM:Config
Added property: text
INFO92ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000, hidedelay=250,
INFO92ms (+0) 6:27:36 PM:Config
queueProperty: hidedelay=250
INFO92ms (+0) 6:27:36 PM:Config
setProperty: hidedelay=250
INFO92ms (+0) 6:27:36 PM:Config
Added property: hidedelay
INFO92ms (+0) 6:27:36 PM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000,
INFO92ms (+0) 6:27:36 PM:Config
queueProperty: autodismissdelay=5000
INFO92ms (+0) 6:27:36 PM:Config
setProperty: autodismissdelay=5000
INFO92ms (+92) 6:27:36 PM:Config
Added property: autodismissdelay
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings