CSS tooltip without a link

[Fallen Angel]

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?

[raena]

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 event but 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.

<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:

	 .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:

    citationtooltip("span.myfavouritestyle", "tooltip");

and adjust the CSS above to refer to span.myfavouritestyle instead.

[RyanReese]

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>

[Fallen Angel]

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.

[ralph.m]

Now I know I could use the blockquote "cite" to point to the source of the quotes...

Why did you decide not to?

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.

There are other inline elements, like <b> and <i>, that could be used instead, perhaps?

[raena]

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.

[Paul O'B]

Nice demo Raena

(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.

As Ralph said that would just be a matter of adding a class to the tooltip span to target it directly and over-ride existing styles (or by using another unique element in that context such as b, strong or em (ignoring semantics for the time being)).

[Fallen Angel]

Why did you decide not to?

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?

Unfortunately not in this instance, there's only spans in the quote - though I guess I could swap the bold span for a <b> tag.

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