JQUERY - Tooltip Question

I basically want to create a good way to have multiple tooltips on a page.   I've attached my code below.

This method does work but it's a little messy.  Is there a way to assign the tooltips to a class or an ID for each a element instead of the div?

It's not so bad in the code below but if I have 5 tool-tips and each has special looks and behaviors the amount of code will really grow so I want to figure out how to combine things.  Similar to that...

<a href="#" id="tip-1" >test</a>
<a href="#" id="tip-2">test</a>

// Create the tooltips only on document load
$(document).ready(function()
{
   // Match all link elements with href attributes within the content div
   $('#tip-1 a[href]').qtip(
   {
      content: 'Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string
   });
   $('#tip-2 a[href]').qtip(
   {
      content: '2-Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string
   });
});

Any thoughts on how to make the code tighter and faster please..

<title>Tooltip Test</title>
<script type="text/javascript" src="http://chrisstormer.com/js/jquery-1.3.2.min.js"></script>
</head>
<div id="tip-1" >
<a href="#" >test</a>
</div>
<div id="tip-2">
<a href="#">test</a>
</div>
 
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#tip-1 a[href]').qtip(
   {
      content: 'Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string
   });
});
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#tip-2 a[href]').qtip(
   {
      content: '2-Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string
   });
});
</script>
<script type="text/javascript" src="http://chrisstormer.com/js/jquery.qtip-1.0.0-beta4.min.js"></script>
</body>
</html>

Open in new window

cxs410Asked:
Who is Participating?
 
bui_trung_hieuCommented:
- The anchors' id is no need anymore.
- Maybe here is a bug of qtip plugin while it does not allow us to access the reference object. It understands $(this) as qtip object instead of anchor object.
But I found that if we do not define the option 'content', it will automatically take anchor's title as content. So the trick is we can set the title first, then call tooltip initialization function.

Please try my code below. Sorry for not test before posting.

$('a.tips[href]').each(function(i){    
     $(this).attr('title',$('#'+$(this).attr('rel')).html());
  })
$('a.tips[href]').qtip({});

<!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 Test</title>
<script type="text/javascript" src="http://chrisstormer.com/js/jquery-1.3.2.min.js"></script>
</head><br/><br/><br/><br/>
<a href="#" class='tips' rel='content-1' >test</a>
<a href="#" class='tips' rel='content-2'>test</a>
<div id='tooltip-content' style='display:none;'>
        <div id='content-1'>blah blah blah</div>
        <div id='content-2'>Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string</div>
</div>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
  //set anchor title 
  $('a.tips[href]').each(function(i){	
     $(this).attr('title',$('#'+$(this).attr('rel')).html());
  })
 
  //load default tip content from anchor title
  $('a.tips[href]').qtip({});
});
</script>
<script type="text/javascript" src="http://chrisstormer.com/js/jquery.qtip-1.0.0-beta4.min.js"></script>
</body>
</html>

Open in new window

0
 
bui_trung_hieuCommented:
If you have multi-items, you should use class name or another attribute to get them as a group.

<a href="#" id="tip-1" class='tips' >test</a>
<a href="#" id="tip-2" class='tips'>test</a>

// Create the tooltips only on document load
$(document).ready(function()
{
   // Match all link elements with href attributes within the content div
  $('a.tips[href]').qtip(
   {
      content: 'Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string
   });
});

// you can use switch..case structure here to define contents for each tool-tips
 // or you can push contents to anchor's attributes or to external divs

<a href="#" id="tip-1" class='tips' rel='content-1' >test</a>
<a href="#" id="tip-2" class='tips' rel='content-2'>test</a>

<div id='tooltip-content' style='display:none;'>
   <div id='content-1'>blah blah blah</div>
  <div id='content-2'>'Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string</div>
</div

$(document).ready(function()
{
   $('a.tips[href]').qtip(
   {
      content: $('#'+$(this).attr('rel'));
   });
});
0
 
bui_trung_hieuCommented:
Sorry, I forgot '.html()' to receive div's html contents. Please try the code below.

<a href="#" id="tip-1" class='tips' rel='content-1' >test</a>
<a href="#" id="tip-2" class='tips' rel='content-2'>test</a>

<div id='tooltip-content' style='display:none;'>
   <div id='content-1'>blah blah blah</div>
  <div id='content-2'>'Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string</div>
</div>

 $(document).ready(function()
{
   $('a.tips[href]').qtip(
   {
      content: $('#'+$(this).attr('rel')).html();
   });
});
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
cxs410Author Commented:
I'm trying what I think your suggesting here:

http://chrisstormer.com/tooltip-test.php

Nothing seems to trigger or happen...

Also is the id="tip-1" & "tip-2" still needed?
<!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 Test</title>
<script type="text/javascript" src="http://chrisstormer.com/js/jquery-1.3.2.min.js"></script>
</head><br/><br/><br/><br/>
<a href="#" class='tips' rel='content-1' >test</a>
<a href="#" class='tips' rel='content-2'>test</a>
<div id='tooltip-content' style='display:none;'>
	<div id='content-1'>blah blah blah</div>
	<div id='content-2'>Some basic content for the tooltip<br /> Another line<br/> Another Linke' // Give it some content, in this case a simple string</div>
</div>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
  $('a.tips[href]').qtip(
  {
     content: $('#'+$(this).attr('rel')).html();
  });
});
</script>
<script type="text/javascript" src="http://chrisstormer.com/js/jquery.qtip-1.0.0-beta4.min.js"></script>
</body>
</html>

Open in new window

0
 
cxs410Author Commented:
This worked perfect. If I could trouble you for one other thing...

The custom formatting that is available.. I'm not sure how it works with the code you put forth..

I've attached some code so you can see what I'm talking about.
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
$('#tip-1 a[href]').qtip(
	{
	content: {
	url: 'test-content.php',
	data: { id: 3 },
    method: 'get'
	},
	position: {
	corner: {
    target: 'rightMiddle',
    tooltip: 'leftMiddle'
			}
   			},
	style: {
	width: 300,
    padding: 5,
    border: {
    width: 3,
    radius: 6
    },
    textAlign: 'left',
    tip: true, // Give it a speech bubble tip with automatic corner detection
    name: 'light' // Style it according to the preset 'cream' style
	}
   });
});

Open in new window

0
 
cxs410Author Commented:
Thanks so much.
0
 
bui_trung_hieuCommented:
My solution only requires you remove option content to receive automatically from it's title, so you can use all other options such as custom formatting.

So, just remove option content and use javascript to set anchor title dynamically.

Sorry for the late answer.
0
 
sdufferCommented:
Hi,
I am working on similar code where we have a number of anchor links and number of showing content divs. For some reason the qtips are generated more
My code is
for(int i=0; i< 10;i++){
<a class="anchor-link-<%=i%>" href="#"></a>
<div id="content-div-<%= i%>"></div>
}

jqtip declaration
for(int i=0; i<10...) {
jQuery(".anchor-link-<%= i%>").qtip(.....);
}
Is anything wrong with the code?
I am not giving the full code but this is the syntax.
0
 
sdufferCommented:
https://bugs.launchpad.net/qtip/+bug/364746
I am seeing this bug using qtip
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.