Tooltips

**reedbird8** · Oct 2, 2012 10:44

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

**Pullo** · Oct 2, 2012 14:09

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.

**reedbird8** · Oct 2, 2012 14:33

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>

**Pullo** · Oct 2, 2012 22:34

Originally Posted by reedbird8

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?

**reedbird8** · Oct 3, 2012 02:10

yes, that's what I would want it to do.

**Pullo** · Oct 3, 2012 02:12

Originally Posted by reedbird8

yes, that's what I would want it to do.

Cool

If this changes at any point you can always refine the '#container' selector.

**reedbird8** · Oct 3, 2012 02:48

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)

**Pullo** · Oct 3, 2012 04:02

Originally Posted by reedbird8

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.

**reedbird8** · Oct 3, 2012 04:12

Originally Posted by Pullo

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

**Pullo** · Oct 3, 2012 04:27

Nice site, but everything seems to be working for me.
Plus I could find no mention of the abbreviation "TSD-1a"

**reedbird8** · Oct 3, 2012 04:42

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)

**Pullo** · Oct 3, 2012 05:03

Your problem is twofold.

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>

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/

**reedbird8** · Oct 3, 2012 05:08

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.

**Pullo** · Oct 3, 2012 05:09

Go on then, but if I ever want to buy a turtle, I expect a good price

**reedbird8** · Oct 3, 2012 05:17

Originally Posted by Pullo

Go on then, but if I ever want to buy a turtle, I expect a good price

No problem!....message sent

**reedbird8** · Oct 3, 2012 07:23

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?

**Pullo** · Oct 3, 2012 11:17

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>

**reedbird8** · Oct 3, 2012 11:39

Thanks again!

These forums are a great place to get help.

User Tag List

Thread: Tooltips

Thread Tools

Display

Tooltips

Bookmarks

Bookmarks

Posting Permissions