JavaScript Fading Tooltips (Only 2KB)

5 Jun

This is a lightweight (2kb) JavaScript tooltip script that is created by Leigeber, a web development blog having nice JavaScript resources.

The tooltip script has a fading animation whose alpha & speed can be set easily.

How to use it?

Include the script.js in your webpage
Add the following JavaScript codes to the tag holding the content. For ex:

<span onmouseover="tooltip.show('<strong>Lorem ipsum</strong>');" onmouseout="tooltip.hide();">JavaScript tooltip</span>

BlinklistBloglinesBlogmarksDiggdel.icio.usFacebookRedditStumbleUpon

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/06/javascript-tooltip/
Demo: http://sandbox.leigeber.com/tooltip

Tags: Javascript
Filed under: Browsing, Goodies, No License

2 Responses for "JavaScript Fading Tooltips (Only 2KB)"

Gavin Laking June 7th, 2008 at 9:22 am
You can also create Rails helper to save your typing a bit (add this to app/helpers/application_helper.rb):

def tooltip(label, text, html_options={})
options = {:class => ‘hotspot’, :onmouseover => “tooltip.show(’#{text}’)”, :onmouseout => “tooltip.hide();”}.merge(html_options)
content_tag(:span, options) do
label
end
end

Then in your views, simply use:

Hope that helps someone

Gavin Laking June 7th, 2008 at 9:26 am
Seems wordpress ate my rails tags, so in your views use

tooltip(”label”, “tooltip text goes here”)

Sorry about that

JavaScript Fading Tooltips (Only 2KB)

How to use it?

Related Posts

2 Responses for "JavaScript Fading Tooltips (Only 2KB)"

Popular Posts