Threaded Mode | Linear Mode

jpSD

Hello-

I am having some problems getting the tooltip to only work when the tooltip attribute is defined.

This works (but for every a href)

JS Code

<script type="text/javascript">
         $(document).ready(function() {
            $("a").qtip( {
            content:{
               text:true
               },
               position:{
               corner:{
               target:'topLeft',
               tooltip:'bottomleft'
               }
               },
           style: { 
      width: 200,
      padding: 5,
      background: '#A2D959',
      color: 'black',
      textAlign: 'center',
      border: {
         width: 7,
         radius: 5,
         color: '#A2D959'
      },
      tip: 'bottomLeft',
	  name: 'dark'
               }
            });
         });
      </script>

and this does not

JS Code

$('[tooltip]').each(function() // Select all elements with the "tooltip" attribute
{
   $(this).qtip({ content: $(this).attr('tooltip'),
     position: {
      corner: {
         target: 'topLeft',
         tooltip: 'bottomleft'
      }
   },
        style: { 
        border: {
         width: 1,
         radius: 3,
         color: '#A2D959'
        },
      padding: 0,
      tip: { // Now an object instead of a string
         corner: 'bottomLeft', // We declare our corner within the object using the corner sub-option
         color: '#AEC18A',
         size: {
            x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 8 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
  },
      width: 200
}
 
                              }); // Retrieve the tooltip attribute value from the current element
});
      </script>

Any ideas why?

***Craig***

First make sure the selector is matching your elements properly, second make sure that the tooltip attribute your returning isn't null. Other than that I can't see anything wrong with your code...

jpSD

Still cannot seem to get this to work
Sad

here are the two examples:
Basic
http://golf.solspot.com/activity/golf/basic.html

JS 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>Untitled Document</title>
<script type="text/javascript" src="/assets/scripts/qtip/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/assets/scripts/qtip/jquery.qtip-min.js"></script>
 
 
      <script type="text/javascript">
         $(document).ready(function() {
            $("a").qtip( {
            content:{
               text:true
               },
               position:{
               corner:{
               target:'topLeft',
               tooltip:'bottomleft'
               }
               },
           style: { 
      width: 200,
      padding: 5,
      background: '#A2D959',
      color: 'black',
      textAlign: 'center',
      border: {
         width: 7,
         radius: 5,
         color: '#A2D959'
      },
      tip: 'bottomLeft',
	  name: 'dark'
               }
            });
         });
      </script>
 
</head>
 
<body>
 
 
      <a href="test.html" title="normal implementation">test</a>
 
</body>
</html>

Tooltip
http://golf.solspot.com/activity/golf/tooltip.html

JS 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>Untitled Document</title>
<script type="text/javascript" src="/assets/scripts/qtip/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/assets/scripts/qtip/jquery.qtip-min.js"></script>
 
 
<script type="text/javascript">
 
$('[tooltip]').each(function() // Select all elements with the "tooltip" attribute
{
   $(this).qtip({ content: $(this).attr('tooltip'),
     position: {
      corner: {
         target: 'topLeft',
         tooltip: 'bottomleft'
      }
   },
        style: { 
        border: {
         width: 1,
         radius: 3,
         color: '#A2D959'
        },
      padding: 0,
      tip: { // Now an object instead of a string
         corner: 'bottomLeft', // We declare our corner within the object using the corner sub-option
         color: '#AEC18A',
         size: {
            x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 8 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
  },
      width: 200
}
 
                              }); // Retrieve the tooltip attribute value from the current element
});
      </script>
</head>
 
<body>
      <a href="test.html" tooltip="tooltip implementation">test</a>
 
</body>
</html>

It must be something simple...but I just do not see it. THanks so much for your help.

***Craig***

Check your selectors jpSD, in your tooltip file you're using this:

JS Code

$('#content a[toolip]')

But you ahve no element by the ID of 'content', so it's not matching anything and hence not showing a tooltip.