Я использую JQuery UI Tooltip Widget и есть код:
$(function() {$( document ).tooltip({ content: 'connecting', content:function(callback) { $.get('teacher.php?teacherid=' + link,{}, function(data) { callback(data); }); }, })}); На моей странице у меня есть:
<div title="" onmouseover="{link=1}">Alex Brown</div> <div title="" onmouseover="{link=2}">John Black</div>
Но это не сработает. Как я могу отправить переменную JS, что Алекс Браун учитель с ID = 1, а Джон Блэк – учитель с ID = 2?
UPD: Ну, это было исправлено
<script> $(function() {$( document ).tooltip({ show: 0, hide: 0, items: 'teacher', content: 'connecting', content: function(callback) { var x=$(this).attr('id') $.get('teacher.php?teacherid='+x,{}, function(data) { callback(data); }); }, })}); </script>
И в HTML теперь я имею:
<teacher id="1">Alex Brown</teacher> <teacher id="2">John Black</teacher> <teacher id="3">Homer Simpson</teacher>
Сначала вы помечаете свои ссылки классом
<div class="teacher-link" data-teacher="1" title="1" onmouseover="{link=1}">Alex Brown</div> <div class="teacher-link" data-teacher="2" title="2" onmouseover="{link=2}">John Black</div>
Затем подключите всплывающие подсказки к этому классу
$(function() {$( ".teacher-link" ).tooltip({ content: 'connecting', content:function(callback) { var link = $(this).attr("data-teacher"); // here retrieve the id of the teacher $.get('teacher.php?teacherid=' + link,{}, function(data) { callback(data); }); }, })});
На странице без html5 вы можете использовать другой атрибут, например title:
var link = $(this).attr("title"); // here retrieve the id of the teacher
Я думаю, что лучше использовать пользовательский атрибут HTML5
<div class="teacher" data-id="1" title="">Alex Brown</div> <div class="teacher" data-id="2" title="">John Black</div>
и скрипт
$(function() { $( ".teacher" ).tooltip({ content: function() { return $(this).attr('data-id'); }, }); });
Вы можете играть с этим по адресу: http://jsfiddle.net/pT3ed/4/
Просто замените «return $ (this) .attr ('data-id'); с вашим загрузчиком, используя $ (this) .attr ('data-id') как id.
Вы должны получить за это:
$('body').tooltip({ selector: '[data-toggle=tooltip]' });
<!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title> dynamic jquery ui tooltip </title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <style> #listing { margin-left: 50px ; } .ui-tooltip { background: #AAABBB ; -webkit-box-shadow: 0 0 10px #aaa; box-shadow: 0 0 10px #aaa; } body .ui-tooltip { border-width: 4px; } </style> </head> <body> <div id="listing"> <div class="item-heading" id="item-1" > link-1 </div> </br> </br> <div class="item-heading" id="item-2"> link-2</div> </div> <script> // courtesy of: http://stackoverflow.com/a/15014759/65706 // and : http://stackoverflow.com/a/23487435/65706 $(document).tooltip({ items: ".item-heading" // set static content to the tooltip // , content: '<p> <a href="http://www.google.com"> go to google </a>' // or // set a dynamic content based on the selected element id , content: function() { //attribute title would do it as well for non html5 //also any custom attribute name would do it for html5 var el_id= $(this).attr('id'); var id=el_id.split('-')[1]; var d_link = "http://www.somesite.com/page.php?id=" + id ; d_link = "<p><a href=\"" + d_link + "\"> go to link " + id + " </a></p>" ; return d_link ; } , open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 4 }, "fast" ); } , close: function( event, ui ) { ui.tooltip.hover( function () { $(this).stop(true).fadeTo(400, 1); //.fadeIn("slow"); // doesn't work because of stop() }, function () { $(this).fadeOut("400", function(){ $(this).remove(); }) } ); } }); </script> </body> </html>