- basic tip from title: This example pulls the clueTip's contents from the invoking element's title attribute via the "splitTitle" option.
- basic ajax, with no title attribute: This one requires no options.
- custom width and hidden title bar: This tip has a custom width of 200px. The clueTip title bar (heading) is hidden. Try me!
- sticky, with arrows:This sticky clueTip has its "close" text in the title bar. It won't close until you close it, or until you hover over another clue-tipped link. It also displays an arrow on one of its sides, pointing to the invoking element. sticky clueTip with arrows
- non-link element, custom attribute, and hover class: Block-level items such as this
h4
have clueTips positioned by the mouse.Hover over me.
- local, with arrows: This one uses local content from a hidden
div
element and displays an arrow that points to the invoking element: hover for local - sticky, truncated clueTip with custom hover class, close position, and close text (it also has a title). Its
href
is different from itsrel
, so if you click it, you'll go to the linked page hover for cluetip, click to visit URL - click to activate: This one won't show the clueTip unless you click it: click me. It's also really wide.
- experimental mouse tracking: The clueTip will move in the direction of your mouse movement, as long as you're still hovering over the invoking element.
jTip Theme
- jTip Style clueTip, with slideDown effect and an image placed in the title for closing it, because it's sticky.
New: The clueTip will close if you mouse out of it. - This one has hoverIntent turned off. Look for the link floated right: jTip Style clueTip
- This one pulls the clueTip contents directly from the
title
attribute of aspan
tag: splitTitle clueTip - this sticky clueTip has a fixed height. It's generally a good idea to make fixed-height clueTips sticky as well, just in case the content requires a scrollbar to read it fully. It will be positioned below the clicked element unless there isn't enough room, in which case it will be positioned above.
- For this one, we're loading visible local content
and here is our visible local content!
- togglable clueTip can be turned off by unchecking the checkbox
Rounded Corners Theme
- content from title attribute, with the clueTip heading hidden.
- rounded corners theme and positioning by mouse.
- Another one with rounded corners theme. This one has "bottomTop" positioning: positioned under link, unless there isn't enough room (then over). It also has "topOffset" set to 70.
- non-caching ajax clueTip.
- ajax error: This one points to a file that does not exist.