myTip v.1 – with jQuery 1.4.1 & JSON
I wanted to experiment with jquery 1.4.1 so I started building a tool tip and just kept going with it. A few things before we get started.
- Uses the wonderful jQuery 1.4.1
- It does not use code in the bottom of your content
- hoverIntent (not the jquery plugin) NEW
- can set feature to stay open
- Can utilize JSON to insert code snippets for fancy tips NEW
- It use the rel and rev attributes
- works in all the popular browers (even ie6) NEW
- Can add plain text to the rev attribute.
- It’s w3c valid
- It’s SUPER easy!
Here are some examples:
Top Left
Top Right
Bottom Left
Bottom Right
Center Right
Center Left
OMG WAIT…
I forgot to tell you… You can put just about anything you can code into this tool tip (I tried an iframe and it worked great!) It is pretty powerful for a tool tip eh?
Live Links
Or Dead Links
Here is an img
Here is a vid
(you can link images to a tool tip too)
The Tricks
Basic Use
- add rel=”mytip” to any link you want the tip to work on.
- Just add your text/code to the rev attribute.
Advanced Use
- to set the width and location would look like this you can set all, some, or only one of these values: rel=”mytip [width:500px; height:300px; center right leaveopen get]” possible values here
- using get will cancel out the rev tag so make sure your id=”tip1″ has the same value as your JSON object ie ‘tip1′.
- to leave the tab open and insert a .closebutton just add leaveopen in the brackets
- you can add classes and attributes like you would in normal code.
- You can change the offset from the mouse in the JS
- You can modify the span wrapper to auto include something more if you want to do something fawn-cay.
- You can change the css on the .mytip class
experiment… what can you not do? Let me know your feedback or if you find some bugs. PLEASE because I don’t want to pollute the web.
Blessings,
Richard Lee
