mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Javascript Tooltips

wee.tooltip enable()
tips { }

Javascript? No way. I can't beleive these aren't operating system generated tooltips!

Frodo's tooltip module is so easy and creates the best looking tooltips around. You can easily show tooltips on your web site when a user hovers over links, form fields, and any element on the page you want. Currently, wz_tooltip seems to be a the most used tooltip javascript code. However, wz_tooltip is out of date and time consuming to implement on a site. It requires onmouseover and onmouseout events placed on all the elements on your site where you want tips. Also, its a heck of a large js file for such a small feature.

Why Frodo's Tooltips are better?

  • On any HTML element you can put a tip="..." attribute.
  • No onmouseover crap to put on your all links, just the tip attribute.
  • You can define the content of your tooltips inline in the HTML, or separently in a javascript object.
  • Frodo's tooltips work in all browsers.
  • Very lightweight code.
  • Google-style tooltip arrow and backdrop shadow!

Creating Tooltips

  A Link. 

A Link.
Hover your mouse over this link
And then this link
And now this one

Define tooltips on any element

You can define the tip attribute to any element, such as a textbox.



Customizing Tooltips

Frodo's tooltips can be custom styles via CSS however you like. The default style is yellow background and black border. To override this, simply add this style to your global stylesheet:

#tipElement { background: green; color: white; }

function wee.tooltip.enable()
Enable tooltips. Run anytime or add to your startup scripts.
function wee.tooltip.disable()
Disable tooltips if enabled.
object { }
You can create an object with id and values, in javascript, and refer to them in HTML by tip="#myTipID", instead of putting large amount of text directly in the HTML attribute.

Discussion on /code-javascript-tooltips

Admin 10/08/16 :  

Arrows are back.

Xymon 11/05/14 : Since the tooltips no longer have little arrows sadface, you might want to remove the second tooltip example..

Xymon 11/05/14 :  

I just noticed, there's no HotBox topic on the sidenav :o

Xymon 11/05/14 :  

Did you trash the arrow on the tooltips?

Xymon 11/05/14 :  

/* I'd say this looks best. */ #tipElement {-moz-box-shadow: 2px 2px 5px #888; -webkit-box-shadow: 2px 2px 5px #888; box-shadow: 2px 2px 5px #888; }

Xymon 11/05/14 :  

Scratch that, I figured it out. And also, disabling tooltips will not trash active tooltips, but once the tooltips have been disables any active tooltip will stay where is. It will not fadeout. If you don't understand what I'm saying, take a look at the latest demo i posted. ( )

B U S T E D 11/05/14 : < hahaha busted !

Xymon 11/05/14 :  

Yea so I'm seeing "Frodo" alot, not really understanding what it is though.