asked on

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

bui_trung_hieu

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'));
});
});

bui_trung_hieu

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();
});
});

cxs410

ASKER

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

ASKER CERTIFIED SOLUTION

bui_trung_hieu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cxs410

ASKER

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

cxs410

ASKER

Thanks so much.

bui_trung_hieu

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.

sduffer

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.

sduffer

https://bugs.launchpad.net/qtip/+bug/364746
I am seeing this bug using qtip