Я использую jQuery flowplayer плагин инструментов http://flowplayer.org/tools/tooltip.html
1) Я хочу, чтобы подсказка была создана, когда пользователь нажимает на элемент.
2) Когда пользователь нажимает на другой элемент, старая подсказка должна быть несвязанной (удаленная)
3) Новая подсказка должна быть создана (или старая перемещенный в) для нажатого элемента
4) Так, там должен <=1 подсказка на странице
Можно ли помочь мне?
Вот код, он работает автономный
jQuery tooltip
John
Mary
Dan
Paul
Kim
There should be only one tooltip on a page!
jQuery tools tooltip поддерживает определение того, какие события вызывают всплывающую подсказку.
Вам не нужно самостоятельно обрабатывать событие щелчка.
Редактирование: Обновление сценария. Щелкните по ссылке, чтобы всегда переместить всплывающую подсказку на второй элемент.
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();
});
Весь сценарий
<!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>
Сборник FlowPlayer имеет API, который возвращается на каждый вызов на всплеск
.
Вы можете позвонить Скрыть
на объекте API.
Вот, как ваш код должен выглядеть:
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();
}
Как насчет этого альтернативного решения?
<!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>