SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: CSS tooltip without a link
-
Sep 6, 2009, 03:31 #1
CSS tooltip without a link
Anyone know a way to do an accessible CSS tooltip without a link? (i.e. without making use of a link element and a <span>).
I've got rather a tricky situation where I've got a blockquote which contains text (a quote, naturally, with it being a blockquote) which has got some complicated styling to highlight specific bits of the text. The various bits of the quote are styled with a number of spans, so trying to use a CSS tooltip which makes use of a span within a link element doesn't work (which is what all the accessible tooltips I've found do), because I get bits of the actual text popping up, as various bits are within spans.
Now I know I could use the blockquote "cite" to point to the source of the quotes (in this case "thinkexist.com"), but what I'm wanting to do is make the source of the quotation (i.e. the person) visible via a tooltip, as I don't really want to have the name visible right there on the page because it would clutter things up and make the page look untidy.
I can't think of a way to do it though without doing a tooltip on a link, and all the accessible CSS tooltips I've found use a <span> element for the tooltip text. As I've already got spans in the text though that's not working.
Any ideas anyone?"You don't need eyes to see - you need vision"
ecanus.net: Poetry, smileys and stuff
-
Sep 6, 2009, 06:25 #2
- Join Date
- Oct 2008
- Location
- Melbourne
- Posts
- 754
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Are you OK with JavaScript as long as it's relatively unobtrusive? I made a jQuery-based tooltip that reads just fine in Fangs, though I haven't yet had the chance to try it with a genuine screen reader. You can use it on a cite element, or only spans with a certain class if you like, or spans within the cite, or something. It has some fade eyecandy as well, but that's easily removed.
It works by appending some divs (with paragraphs inside, but that's just for a style hook) to the body with the contents of each cite, then positioning the divs far away. When you mouse over the appropriate cite, the div is positioned near your mouse. The CSS uses some text-indent trickery to hide the cite text, and a background image to indicate that there's something here to mouse over.
I wouldn't call this the most accessible thing in the world since keyboard navigators would have trouble triggering a mouseover eventbut I guess it wouldn't be particularly onerous to add a button someplace that reveals them again in their rightful spots. It'd be a good idea to provide the option in case people would like to see those anyway, mouse or not.
Code JavaScript:<script type="text/javascript" charset="utf-8"> $(document).ready(function() { citationtooltip("cite", "tooltip"); function citationtooltip(target_items, name) { $(target_items).each(function(i) { $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).html() + "</p></div>"); var my_tooltip = $("#" + name + i); $(this).mouseover(function() { my_tooltip.css({ opacity: 0.9 }).fadeIn(200); }).mousemove(function(kmouse) { my_tooltip.css({ left: kmouse.pageX + 15, top: kmouse.pageY + 15 }); }).mouseout(function() { my_tooltip.fadeOut(200); }); }); } }); </script>
here's the CSS:
Code CSS:.tooltip{ position:absolute; z-index:100; left:-9999px; background-color:#fff; color:#333; padding:2px; width:165px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-size: smaller; } .tooltip p{ margin:0px; padding:2px 8px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #000; color: #fff; } cite { display: block; cursor: help; width: 15px; height: 15px; background: transparent url(someimage.gif) top left no-repeat; text-indent: -9999px; }
Using something other than a cite is as easy as changing the first argument to the tooltip fn:
Code JavaScript:citationtooltip("span.myfavouritestyle", "tooltip");
and adjust the CSS above to refer to span.myfavouritestyle instead."I'm Commander Shepard, and this is
my favourite post on the internet."
We'll miss you, Dan Schulz.
-
Sep 6, 2009, 07:19 #3
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
It's the same theory as a regular tooltip (google has many results) but just switch the tag <a> for <span>. Of course change the CSS as well, and IE6 will need some JS to recognize hover for the <span>
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Sep 6, 2009, 15:57 #4
Thanks raena - I'll check that out.
For the moment I've got a small (tiny) "info" image after the quote which I've used as the link for the tooltip (Ryan - when I tried using the span with various tooltips I found online, because there are multiple spans in the text as well as a few words not enclosed in spans, trying to use a span as the hook (even one with a unique id) caused only the text not in an span in the quote to display, presumably because of the "display: none" on the tooltip). Putting the link element after the quote text and using the image as the hook avoids the problem of the quote text disappearing.
The image link isn't ideal, but it's unobtrusive so it'll do for now while I figure out something else and try raena's tooltip. Thanks for the input guys."You don't need eyes to see - you need vision"
ecanus.net: Poetry, smileys and stuff
-
Sep 6, 2009, 16:44 #5
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 Thread(s)
-
Sep 6, 2009, 17:12 #6
- Join Date
- Oct 2008
- Location
- Melbourne
- Posts
- 754
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try a demo!
http://raena.net/trythis/citetooltips.html
Could almost certainly do with some improvement. Also, I wouldn't recommend actually using the cyclops.gif in real life, as your tooltip pal."I'm Commander Shepard, and this is
my favourite post on the internet."
We'll miss you, Dan Schulz.
-
Sep 7, 2009, 01:52 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Nice demo Raena
Originally Posted by Fallen Angel
-
Sep 7, 2009, 13:10 #8
I have used the cite element with a link to the online source of the quote (thinkexist.com in this case), but I wanted just the person's name to be visible. Normally with a blockquote I style the <cite> with the name and do the name as a link to the online source, but that's when I've got a blockquote in the middle of other text. In this case though the quote's done as a "pullquote," and adding the author details after the quote would mess up the flow of the site, hence wanting to use a tooltip.
There are other inline elements, like <b> and <i>, that could be used instead, perhaps?
That's a nice demo Raena (yep, I see what you mean about cyclops). This is what I'm using at the moment: http://www.neonblueweb.co.uk/example...p_example.html
"You don't need eyes to see - you need vision"
ecanus.net: Poetry, smileys and stuff
Bookmarks