cxs410
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..
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>
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();
});
});
<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'))
});
});
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?
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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
}
});
});
ASKER
Thanks so much.
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.
So, just remove option content and use javascript to set anchor title dynamically.
Sorry for the late answer.
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.
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%>"
<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.
https://bugs.launchpad.net/qtip/+bug/364746
I am seeing this bug using qtip
I am seeing this bug using qtip
<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'))
});
});