[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 692
  • Last Modified:

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

0
cxs410
Asked:
cxs410
  • 4
  • 3
  • 2
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now