Linking/unlinking jquery object to an element
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>
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>
The FlowPlayer Tooltip has an API that is returned on EVERY call to tooltip.
You can then call hide on the API object.
Here's what your code should look like:
var old_id, API;
//first time - create tooltip
function my_create(id){
API = $("#"+id).tooltip({
effect: "slide",
tip: '.tooltip',
position: 'bottom center'
});
}
//next times - move tooltip to other element
function my_unlink(id){
API.unbind("mouseover");
//todo
}
function my_link(id){
my_create( id );
}
//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();
}
How about this alternative solution?
<!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">
$(document).ready(function() {
$("h1").tooltip({
effect: "slide",
tip: '.tooltip' ,
position: 'bottom center',
onBeforeShow: function(event){
//don't show tooltip if trigger (h1 object) does not have specified class
if(!this.getTrigger().hasClass("hasToolTip"))
return false;
}
});
$("h1").click(function() {
$("h1").removeClass("hasToolTip");
$(this).addClass("hasToolTip");
});
});
</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 id="_1">John</h1>
<h1 id="_2">Mary</h1>
<h1 id="_3">Dan</h1>
<h1 id="_4">Paul</h1>
<h1 id="_5">Kim</h1>
<div class="tooltip">There should be only one tooltip on a page!</div>
</body></html>
加载中,请稍侯......
精彩评论