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>
Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/06/javascript-tooltip/
Demo: http://sandbox.leigeber.com/tooltip
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 Comments
2 Responses for "JavaScript Fading Tooltips (Only 2KB)"
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={})
nmouseover => “tooltip.show(’#{text}’)”, 
nmouseout => “tooltip.hide();”}.merge(html_options)
options = {:class => ‘hotspot’,
content_tag(:span, options) do
label
end
end
Then in your views, simply use:
Hope that helps someone
Seems wordpress ate my rails tags, so in your views use
tooltip(”label”, “tooltip text goes here”)
Sorry about that