SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Thread: Tooltips

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tooltips

    Not sure if this is the best place to ask this, or if it can be done, but here it goes.

    Is there a way to generate a tooltip anytime a certain word or phrase appears within my site? Ideally, I'd like to create a series of tooltips for some terminology. Essentially, anytime the abbreviation "TSD-1a" appears a tooltip would be generated for this abbreviation. (I'm looking for something other than me having to type the html markup everytime I want the tooltip to appear.)

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Presuming that your content is in a <div> called "container" you can wrap all occurences of the abbreviation "TSD-1a" in <a> tags and apply a class of "normalTip" to these with the following jQuery:
    Code JavaScript:
    $('#container').html($('#container').html().replace(/(TSD-1a)/g,'<a href="#" class="normalTip" title="Some Text">$1</a>'));

    After that you can get all elements with the class "normalTip" and hook them up to tooltips. The title attribute serves as the text for the tip.
    Here's an example:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tooltip demo</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://ara-abcarians.com/jquery/atooltip/js/jquery.atooltip.js"></script>
        <link type="text/css" href="http://ara-abcarians.com/jquery/atooltip/css/atooltip.css" rel="stylesheet"  media="screen" />
        <script>$(function(){$('a.normalTip').aToolTip(); });</script>
      </head>
    
      <body>
        <div id="container" style="width:600px; margin: 0 auto; padding-top:50px;">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, TSD-1a sed do eiusmod tempor incididunt ut labore 
            et dolore magna aliqua. Ut TSD-1a enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
            ex ea commodo consequat. Duis TSD-1a aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur TSD-1a sint occaecat cupidatat non proident, TSD-1a sunt in culpa qui officia deserunt 
            mollit anim id est TSD-1a laborum.
          </p>
        </div>
        <script>$('#container').html($('#container').html().replace(/(TSD-1a)/g,'<a href="#" class="normalTip" title="Some Text">$1</a>'));</script>
      </body>
    </html>
    Here, I've used a simple jQuery tooltip plugin to achieve the tooltips.
    If you opt for this, please download the files you need from here: http://ara-abcarians.com/jquery/atooltip/ and don't use the author's site as a CDN.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Question - will it only grab those directly appearing in the div with id "container"? Or if there is a div inside the "container" div, will it grab those, as well?

    i.e.:

    Code:
    <body>
        <div id="container" style="width:600px; margin: 0 auto; padding-top:50px;">
         <div id="left column">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, TSD-1a sed do eiusmod tempor incididunt ut labore 
            et dolore magna aliqua. Ut TSD-1a enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
            ex ea commodo consequat. Duis TSD-1a aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur TSD-1a sint occaecat cupidatat non proident, TSD-1a sunt in culpa qui officia deserunt 
            mollit anim id est TSD-1a laborum.
          </p>
         </div>
        </div>
        <script>$('#container').html($('#container').html().replace(/(TSD-1a)/g,'<a href="#" class="normalTip" title="Some Text">$1</a>'));</script>
      </body>

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by reedbird8 View Post
    Thanks! Question - will it only grab those directly appearing in the div with id "container"? Or if there is a div inside the "container" div, will it grab those, as well?
    It'll grab everything within the "container" div, irrespective of whether it's nested in a further div/divs.
    Is this the desired behaviour?

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, that's what I would want it to do.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by reedbird8 View Post
    yes, that's what I would want it to do.
    Cool
    If this changes at any point you can always refine the '#container' selector.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it works, but it clashes with other script on my site. A bunch of my other jquery features stop working. (tabs, certain menus, etc)

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by reedbird8 View Post
    Well, it works, but it clashes with other script on my site. A bunch of my other jquery features stop working. (tabs, certain menus, etc)
    That's not good.
    Are you using any other libraries?
    If you can post a url, I don't mind taking a look.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    That's not good.
    Are you using any other libraries?
    If you can post a url, I don't mind taking a look.
    Thanks, url is http://theturtleroom.com

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Nice site, but everything seems to be working for me.
    Plus I could find no mention of the abbreviation "TSD-1a"

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    Oh, I had pulled it down, since things weren't working....I'll put it back up. Instead of looking for TSD-1a (which is for a future reference), look for SCL on this page:

    http://theturtleroom.com/projects/st...emys-barbouri/

    You can see that the tabs below the text and the main navigational menus (can't get to the submenu level) have stopped working. In addition, my sidebar menu is a jquery menu and no longer automatically collapses (and expands/collapses on hover)

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Your problem is twofold.

    1. You have included jQuery twice.
      Remove the following from line 251 of your code:
      HTML Code:
      <script type="text/javascript" src="http://theturtleroom.com/otherassets/ToolTip/js/jquery.min.js"></script>
    2. jQuery seems to be operating in noConflict mode on your page.
      Change line 254 to this:
      HTML Code:
      <script>jQuery(function(){jQuery('a.normalTip').aToolTip(); });</script>
      and in line 841 change this:
      HTML Code:
      <script>$('#main_wrapper').html($('#main_wrapper').html().replace(/(SCL)/g,'<a href="#" class="normalTip" title="Straight-line Carapace Length: The length of the carapace of a turtle measured on a straight line, as if it were flat.">$1</a>'));</script>
      to this:
      HTML Code:
      <script>jQuery('#main_wrapper').html(jQuery('#main_wrapper').html().replace(/(SCL)/g,'<a href="#" class="normalTip" title="Straight-line Carapace Length: The length of the carapace of a turtle measured on a straight line, as if it were flat.">$1</a>'));</script>
    Just for your info: all noConflict mode does is have jQuery relinquish control of the $ variable. You can read about it here: http://api.jquery.com/jQuery.noConflict/

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again! It's all working well now!

    There is still one place where the tooltip is not visually appearing properly. Its not live to the public yet, but if you wouldn't mind looking at it, I'll send some login information and the page link so you could look at that page, too.

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Go on then, but if I ever want to buy a turtle, I expect a good price

  15. #15
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Go on then, but if I ever want to buy a turtle, I expect a good price
    No problem!....message sent

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, one last tooltip question:

    I'd like to be able to tip all of TSD, TSD-1a, TSD-1b, and TSD-2. However, a tip for TSD seems to interfere with the other 3 tips. Any idea?

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,008
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi There,

    do it like this, with the use of a regular expression:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tooltip demo</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://ara-abcarians.com/jquery/atooltip/js/jquery.atooltip.js"></script>
        <link type="text/css" href="http://ara-abcarians.com/jquery/atooltip/css/atooltip.css" rel="stylesheet"  media="screen" />
        <script>$(function(){$('a.normalTip').aToolTip(); });</script>
      </head>
    
      <body>
        <div id="container" style="width:600px; margin: 0 auto; padding-top:50px;">
         <div id="left column">
          <p>
            TSD Lorem ipsum TSD dolor sit amet, consectetur adipisicing elit, TSD-1a sed do eiusmod tempor incididunt ut labore 
            et dolore magna aliqua. Ut TSD-1a enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
            ex ea commodo consequat. Duis TSD-1a aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur TSD-1a sint occaecat cupidatat non TSD, proident, TSD-1a sunt in culpa qui officia deserunt 
            mollit anim id est TSD TSD-1a laborum TSD.
          </p>
         </div>
        </div>
        <script>
          //Matches (start of line or whitespace)(TSD)(whitespace, or a fullstop, or a comma, or the end of the line)
          var tsd = /(^|\s)(TSD)(\s|\.|,|$)/g;
          var tsdTip = '$1<a href="#" class="normalTip" title="TSD">$2</a>$3'
    
          //Matches (start of line or whitespace)(TSD-1a)(whitespace, or a fullstop, or a comma, or the end of the line)
          var tsd1a = /(^|\s)(TSD-1a)(\s|\.|,|$)/g;
          var tsd1aTip = '$1<a href="#" class="normalTip" title="TSD-1a">$2</a>$3'
    
          $('#container').html(
            $('#container').html().replace(tsd, tsdTip).replace(tsd1a, tsd1aTip)
          );
        </script>
      </body>
    </html>

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2012
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again!

    These forums are a great place to get help.


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
  •