SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Fallen Angel's Avatar
    Join Date
    Sep 2006
    Location
    UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Guru
    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 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.

    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.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    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

  4. #4
    SitePoint Enthusiast Fallen Angel's Avatar
    Join Date
    Sep 2006
    Location
    UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Fallen Angel View Post
    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?

  6. #6
    SitePoint Guru
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Nice demo Raena

    Quote Originally Posted by Fallen Angel
    (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)).

  8. #8
    SitePoint Enthusiast Fallen Angel's Avatar
    Join Date
    Sep 2006
    Location
    UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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
    "You don't need eyes to see - you need vision"
    ecanus.net: Poetry, smileys and stuff


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •