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 | ? |
INFO69ms (+0) 4:38:30 AM: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,
INFO69ms (+0) 4:38:30 AM:Config
queueProperty: constraintoviewport=true
INFO69ms (+0) 4:38:30 AM: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,
INFO69ms (+0) 4:38:30 AM:Config
queueProperty: visible=false
INFO69ms (+0) 4:38:30 AM: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,
INFO69ms (+1) 4:38:30 AM:Config
queueProperty: context=link
INFO68ms (+0) 4:38:30 AM: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,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: disabled=false
INFO68ms (+0) 4:38:30 AM:Config
setProperty: disabled=false
INFO68ms (+0) 4:38:30 AM:Config
Added property: disabled
INFO68ms (+0) 4:38:30 AM: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],
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: container=[object HTMLBodyElement]
INFO68ms (+0) 4:38:30 AM:Config
setProperty: container=[object HTMLBodyElement]
INFO68ms (+0) 4:38:30 AM:Config
Added property: container
INFO68ms (+0) 4:38:30 AM:Config
setProperty: text=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: text
INFO68ms (+0) 4:38:30 AM: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,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: hidedelay=250
INFO68ms (+0) 4:38:30 AM:Config
setProperty: hidedelay=250
INFO68ms (+0) 4:38:30 AM:Config
Added property: hidedelay
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: autodismissdelay=5000
INFO68ms (+0) 4:38:30 AM:Config
setProperty: autodismissdelay=5000
INFO68ms (+0) 4:38:30 AM:Config
Added property: autodismissdelay
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: showdelay=200
INFO68ms (+0) 4:38:30 AM:Config
setProperty: showdelay=200
INFO68ms (+0) 4:38:30 AM:Config
Added property: showdelay
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: preventoverlap=true
INFO68ms (+0) 4:38:30 AM:Config
setProperty: preventoverlap=true
INFO68ms (+0) 4:38:30 AM:Config
Added property: preventoverlap
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: iframe=false
INFO68ms (+0) 4:38:30 AM:Config
setProperty: iframe=false
INFO68ms (+0) 4:38:30 AM:Config
Added property: iframe
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, zindex=null, constraintoviewport=false,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: constraintoviewport=false
INFO68ms (+0) 4:38:30 AM:Config
setProperty: constraintoviewport=false
INFO68ms (+0) 4:38:30 AM:Config
Added property: constraintoviewport
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, zindex=null,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: zindex=null
INFO68ms (+0) 4:38:30 AM:Config
setProperty: zindex=null
INFO68ms (+0) 4:38:30 AM:Config
Added property: zindex
INFO68ms (+0) 4:38:30 AM:Config
setProperty: height=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: height
INFO68ms (+0) 4:38:30 AM:Config
setProperty: width=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: width
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: fixedcenter=false
INFO68ms (+0) 4:38:30 AM:Config
setProperty: fixedcenter=false
INFO68ms (+0) 4:38:30 AM:Config
Added property: fixedcenter
INFO68ms (+0) 4:38:30 AM:Config
setProperty: context=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: context
INFO68ms (+0) 4:38:30 AM:Config
setProperty: xy=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: xy
INFO68ms (+0) 4:38:30 AM:Config
setProperty: y=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: y
INFO68ms (+0) 4:38:30 AM:Config
setProperty: x=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: x
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: visible=true, monitorresize=true, appendtodocumentbody=false,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: appendtodocumentbody=false
INFO68ms (+0) 4:38:30 AM:Config
setProperty: appendtodocumentbody=false
INFO68ms (+0) 4:38:30 AM:Config
Added property: appendtodocumentbody
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: visible=true, monitorresize=true,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: monitorresize=true
INFO68ms (+0) 4:38:30 AM:Config
setProperty: monitorresize=true
INFO68ms (+0) 4:38:30 AM:Config
Added property: monitorresize
INFO68ms (+0) 4:38:30 AM:Config
setProperty: effect=undefined
INFO68ms (+0) 4:38:30 AM:Config
Added property: effect
INFO68ms (+0) 4:38:30 AM:Config
Config event queue: visible=true,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: visible=true
INFO68ms (+0) 4:38:30 AM:Config
setProperty: visible=true
INFO68ms (+0) 4:38:30 AM:Config
Added property: visible
INFO68ms (+0) 4:38:30 AM: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,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: constraintoviewport=true
INFO68ms (+0) 4:38:30 AM: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,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: visible=false
INFO68ms (+0) 4:38:30 AM: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,
INFO68ms (+0) 4:38:30 AM:Config
queueProperty: text=My text was set using the 'text' configuration property
INFO68ms (+0) 4:38:30 AM: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,
INFO68ms (+1) 4:38:30 AM:Config
queueProperty: context=ctx
INFO67ms (+0) 4:38:30 AM: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,
INFO67ms (+0) 4:38:30 AM:Config
queueProperty: disabled=false
INFO67ms (+0) 4:38:30 AM:Config
setProperty: disabled=false
INFO67ms (+0) 4:38:30 AM:Config
Added property: disabled
INFO67ms (+0) 4:38:30 AM: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],
INFO67ms (+0) 4:38:30 AM:Config
queueProperty: container=[object HTMLBodyElement]
INFO67ms (+0) 4:38:30 AM:Config
setProperty: container=[object HTMLBodyElement]
INFO67ms (+0) 4:38:30 AM:Config
Added property: container
INFO67ms (+0) 4:38:30 AM:Config
setProperty: text=undefined
INFO67ms (+0) 4:38:30 AM:Config
Added property: text
INFO67ms (+0) 4:38:30 AM: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,
INFO67ms (+0) 4:38:30 AM:Config
queueProperty: hidedelay=250
INFO67ms (+0) 4:38:30 AM:Config
setProperty: hidedelay=250
INFO67ms (+0) 4:38:30 AM:Config
Added property: hidedelay
INFO67ms (+0) 4:38:30 AM:Config
Config event queue: monitorresize=true, appendtodocumentbody=false, fixedcenter=false, visible=true, constraintoviewport=false, iframe=false, zindex=null, preventoverlap=true, showdelay=200, autodismissdelay=5000,
INFO67ms (+0) 4:38:30 AM:Config
queueProperty: autodismissdelay=5000
INFO67ms (+0) 4:38:30 AM:Config
setProperty: autodismissdelay=5000
INFO67ms (+67) 4:38:30 AM: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