Menu
I'm using a jquery flowplayer tools plugin http://flowplayer.org/tools/tooltip.html
1)I want a tooltip to be created when user clicks on an element.
2)When the user clicks on another element, the old tooltip must be unlinked(deleted)
3)A new tooltip should be created(or old moved to) for the clicked element
4)So, there should <=1 tooltip on the page
Can you please help me?
Here's the code, it runs standalone
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>jQuery tooltip</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script type="text/javascript">
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
$(document).ready(function() {
$("#_2").tooltip({
effect: "slide",
tip: '.tooltip' ,
position: 'bottom center'
});
});
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
/** The code below is not working as I expect, it doesn't MOVE tooltip **/
var old_id;
//first time - create tooltip
function my_create(id){
$("#"+id).tooltip({
effect: "slide",
tip: '.tooltip',
position: 'bottom center'
});
}
//next times - move tooltip to other element
function my_unlink(id){
$("#"+id).unbind("mouseover");
//todo
}
function my_link(id){
//todo
}
//THE MAIN FUNCTION
function do_tip(new_id){
if(old_id){
my_unlink(old_id);
my_link(new_id);
alert(new_id);
}
else
my_create(new_id);
old_id=new_id;
//new_id.focus();
}
</script>
<style>
.tooltip {
display: none;
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
font-size:14px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
h1 {
width: 400px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<h1 onclick="do_tip(this.id)" id="_1">John</h1>
<h1 onclick="do_tip(this.id)" id="_2">Mary</h1>
<h1 onclick="do_tip(this.id)" id="_3">Dan</h1>
<h1 onclick="do_tip(this.id)" id="_4">Paul</h1>
<h1 onclick="do_tip(this.id)" id="_5">Kim</h1>
<div class="tooltip">There should be only one tooltip on a page!</div>
</body></html>
438
jQuery tools tooltip supports defining which events trigger the tooltip.
You do not need to handle the click event by yourself.
Edit: Updated the script. Click on the link to move the tooltip to the second element always.
Here is the script
var tt = $("h1").tooltip({
events:{def:'click, click'},
effect: "slide",
tip: '.tooltip' ,
position: "bottom center",
api: true,
delay: 30000
});
$("#ht").click(function() {
tt.hide();
$("#_2").tooltip().show();
});
The whole script
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style>
.tooltip {
display: none;
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
font-size:14px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
h1 {
width: 400px;
text-align: center;
background-color: yellow;
cursor:pointer;
}
</style>
</head>
<body>
<h1 id="_1">John</h1>
<h1 id="_2">Mary</h1>
<h1 id="_3">Dan</h1>
<h1 id="_4">Paul</h1>
<h1 id="_5">Kim</h1>
<a id="ht" href="javascript:void()">Click here</a>
<div class="tooltip">There should be only one tooltip on a page!</div>
</body>
</html>
<script>
var tt = $("h1").tooltip({
events:{def:'click, click'},
effect: "toggle",
tip: '.tooltip' ,
position: "bottom center",
api: true,
delay: 30000
});
$("#ht").click(function() {
tt.hide();
setTimeout(function(){$("#_2").tooltip().show();}, 500);
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
