To introduce our ToolTip Tuesday ( Editor : and you never know we may even pop in with some additional Quick Tips too :D )
Here is a neat CSS solution to add funnily enough, ToolTips to your links in RapidWeaver, the same technique can be used in any other ‘sensible’ web development applcation too
Enjoy the free screencast.
HTML
<h2>By Default</h2> <a title="RW Screencast Training" href="supportcasts.com">SupportCasts</a> <h2>For an Active Link</h2> <a class="tip" href="http://myrapidweaver.us">myRapidWeaver<span>Put Info Here</span></a> <h2>Just for Information</h2> <a class="tip" href="#">This is a tooltip<span>add text that appears just when you roll on with the mouse</span></a> <h2>Just for Information</h2> <a class="tip" href="#">What about an Image?<span><img src="assets/Beaker_512x512.png" alt="" width="108px" height="108px" /></span></a> |
CSS
a.tip { position: relative; text-decoration: none; } a.tip span { display: none; position: absolute; top: -10px; left: 100px; width: 150px; z-index: 100; background: #ccc; border: 2px solid red; padding: 10px 0 10px 20px; color: #000; font-weight: bold; -moz-border-radius: 5px; /* this works only in camino/firefox */ -webkit-border-radius: 5px; /* this is just for Safari */ -webkit-box-shadow: -5px -5px 15px #222; -moz-box-shadow: 10px 10px 15px #ccc; box-shadow: 10px 10px 15px #ccc; } a:hover.tip { font-size: 99%; /* this is just for IE */ } a:hover.tip span { display: block; } /*pageHeader CSS*/ #pageHeader h2 { color: #000; text-shadow: 2px 2px 2px #ddccb5; } /*footer CSS*/ #footer p { font-size: 14px; color: #000; font-weight: bold; text-shadow: 4px 4px 4px #ddccb5; } a:link { text-decoration: none } |
Nice… any way to make the tooltip fade in and out? That’s all I need…
I’ve looked at jquery-based solutions like this one: http://flowplayer.org/tools/forum/index.html… but it’s overkill.
Thanks!
Dave
As for as I know you would need some javascript (jquery) to do this. CSS will just “pop”. Maybe Ed will find an answer…
Ed, thanks for the Tooltip screencast. Instead of copying the code from your screencast into my text editor, is there a way to upload the CSS ToolTip code as show notes please?
Ed, I also would like the code you used either as a snippet or as show notes. Is that possible?
finn
revist our post we have the code for you there
Thanks all. And thanks to Larry for posting the code. My original idea for including the code was a bit off.
I’m finding a variety of ToolTips. Seems every few days I come across new ones. Hopefully I’ll be able to keep things in “sized chunks”, hopefully, not longer than about 10 minutes each.
You want some “fade in / fade out” it’ll have to be accomplished using jQuery or other script. That’s been the most fun, playing with and learning jQuery. I’m gaining a better understanding of how to manipulate it. So … teaching you is teaching me.
Thank you very much for having posted the code.
Hey Dave,
Check it out … I’ve posted the answer to your question in a new free cast.