freejs首页

clueTip 鼠标经过显示提示文字内容 ajax载入tips

  1. basic tip from title: This example pulls the clueTip's contents from the invoking element's title attribute via the "splitTitle" option.
  2. basic ajax, with no title attribute: This one requires no options.
  3. custom width and hidden title bar: This tip has a custom width of 200px. The clueTip title bar (heading) is hidden. Try me!
  4. 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
  5. non-link element, custom attribute, and hover class: Block-level items such as this h4 have clueTips positioned by the mouse.

    Hover over me.

  6. 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
  7. sticky, truncated clueTip with custom hover class, close position, and close text (it also has a title). Its href is different from its rel, so if you click it, you'll go to the linked page hover for cluetip, click to visit URL
  8. click to activate: This one won't show the clueTip unless you click it: click me. It's also really wide.
  9. 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

  1. 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.
  2. This one has hoverIntent turned off. Look for the link floated right: jTip Style clueTip
  3. This one pulls the clueTip contents directly from the title attribute of a span tag: splitTitle clueTip
  4. 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.
  5. For this one, we're loading visible local content

    and here is our visible local content!

  6. togglable clueTip can be turned off by unchecking the checkbox

Rounded Corners Theme

  1. content from title attribute, with the clueTip heading hidden.
  2. rounded corners theme and positioning by mouse.
  3. 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.
  4. non-caching ajax clueTip.
  5. ajax error: This one points to a file that does not exist.