Как создать всплывающую подсказку с jquery без плагина?

Я использовал несколько разных плагинов для всплывающих подсказок на протяжении многих лет, но я думаю, что пришло время написать свое. Просто я не ищу плагин, который имеет все варианты, поскольку я знаю, как я хочу, чтобы каждая всплывающая подсказка всплывала, чтобы выглядеть и вести себя. У большинства плагинов есть диапазон анимации и доступных позиций, и я думаю, что это чрезмерное для легкого, которое я хочу создать, с вашей помощью, конечно :)Как создать всплывающую подсказку с jquery без плагина?

В принципе, используя атрибут title для зависания, я хочу всплывающая подсказка, чтобы отображаться непосредственно выше и центрироваться до зависания элемента.

Я знаю, как заполнить div, который будет показан, но то, что я пытаюсь выработать, заключается в том, как сказать, что div позиционирует себя непосредственно над элементом.

В идеале это делается с минимальным кодом. Моя логика говорит что-то вроде этого (псевдокод):

<html> 
<head> 

<style type="text/css"> 

    #myToolTip { display: none; } 

</style>

<script type="text/javascript"> 

$(document).ready(function() { 

    $('.hoverAble').hover(function(){ 

     var tip = $(this).attr('title'); 

     $('#myToolTip').html(tip).fadeIn(); 

    }, function() { 

     $('#myToolTip').fadeOut(); 

    } 

}); 
</script> 
</head> 
<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code"></div> 

</body> 
</html>

конечно приведенный выше код только собирается заполнить всплывающей подсказки и не быть расположен относительно наведен элемента. То, где мое понимание не подходит. Вы можете помочь?

Редактировать: Для уточнения, я не хочу, чтобы всплывающая подсказка перемещалась с помощью мыши.

источник

2009-08-10 willdanceforfun

в вашем коде есть ошибка готовности (функция() {}); скобка отсутствует! –

tx для этого джона! – willdanceforfun

Взгляните на в JQuery различных CSS functions, в основном offset() и, возможно, height() ,

// pseudocode, assuming #tooltip has position: absolute 
// do something similar with the left offset as well 
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

Это место всплывающей подсказки статически над, или близко к ссылке, которую я считаю, что вы ищете. Если вы хотите, чтобы всплывающая подсказка перемещалась с помощью мыши, вам необходимо динамически обновлять позицию в событии mousemove.

источник

2009-08-10 12:41:07 deceze

Я думаю, что это все. теперь кажется очевидным, чтобы посмотреть на функции css там! – willdanceforfun

Верх, кажется, работает нормально, но мой атрибут «left», кажется, ничего не делает: $ ('# tooltip'). Css ({top: $ (this) .offset(). Top - 50 + 'px ', left: $ (this) .offset()}); -- есть идеи? – willdanceforfun

'offset()' возвращает объект с атрибутами «top» и «left», поэтому вы должны использовать 'offset(). Left'. Вы также прикрепляли «px»? – deceze

Без конкретных примеров кода вы можете посмотреть содержимое объекта события (я предполагаю, что вы делаете это в событии onmouseover).

Ваши clientX и clientY свойств это должно помочь

проверьте следующее для объекта события:

http://www.javascriptkit.com/jsref/event.shtml

источник

2009-08-10 12:40:01

Я думаю, это может вам помочь.

<html> 
<head> 
<style type="text/css"> 
    #myToolTip { display: none;position:absolute; } 
</style> 
<script type="text/javascript" src='js/jquery.js'></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hoverAble').hover(function(e){ 
     var left = mouseX(e); 
     var top = mouseY(e); 
     var tip = $(this).attr('title'); 

     $('#myToolTip').css('top',top); 
     $('#myToolTip').css('left',left); 
     $('#myToolTip').html(tip).fadeIn(); 


    }, function() { 

     $('#myToolTip').fadeOut(); 

    }) 

});

позиции мыши:

function mouseX(evt) { 
if (evt.pageX) return evt.pageX; 
else if (evt.clientX) 
    return evt.clientX + (document.documentElement.scrollLeft ? 
    document.documentElement.scrollLeft : 
    document.body.scrollLeft); 
else return null; 
} 

function mouseY(evt) { 
if (evt.pageY) return evt.pageY; 
else if (evt.clientY) 
    return evt.clientY + (document.documentElement.scrollTop ? 
    document.documentElement.scrollTop : 
    document.body.scrollTop); 
else return null; 
} 
</script> 
</head>

HTML:

<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code">hi catch me</div> 

</body> 
</html>

источник

2009-08-10 12:52:12

извините, я должен был быть более конкретным. Я не хочу, чтобы подсказка двигалась с помощью мыши ... чуть выше текущего элемента. – willdanceforfun

<div title="This is tooltip">Hover Me</div>

Эта простая подсказка работает для меня. U может добавить любой класс, чтобы сделать его стильным.

источник

2009-08-10 13:18:45 NAVEED

Один из самых простых в использовании встроенной всплывающей подсказки jQuery.UI.

$(document).tooltip();

И в HTML все "название" метка обратиться к всплывающей подсказке ...

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>

источник

2013-10-06 21:43:34 huncyrus

Как создать всплывающую подсказку с jquery без плагина?

ответ

Смежные вопросы