Tooltips

JavaScript
1

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

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:

$('#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:

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

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


<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

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

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

6

Cool :slight_smile:
If this changes at any point you can always refine the ‘#container’ selector.

7

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

That’s not good.
Are you using any other libraries?
If you can post a url, I don’t mind taking a look.

9

Thanks, url is http://theturtleroom.com

10

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

11

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/steve-projects/graptemys/graptemys-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

Your problem is twofold.

[LIST=1]
[*]You have included jQuery twice.
Remove the following from line 251 of your 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:

<script>jQuery(function(){jQuery('a.normalTip').aToolTip(); });</script>

and in line 841 change this:

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

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

[/LIST]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

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

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

15

No problem!..message sent

16

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

Hi There,

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

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

Thanks again!

These forums are a great place to get help.