Как создать подсказку с jQuery без плагина?
String.contains не использует regex, таким образом, нет проблемы в этом случае.
, Где regex требуется, довольно отклоняющие строки с regex специальными символами, java.util.regex использования. Pattern.quote для выхода из них.
4 ответа
Взгляните на различные функции CSS в jQuery, в основном 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 .
<div title="This is tooltip">Hover Me</div>
Эта простая всплывающая подсказка мне подходит. Вы можете добавить любой класс, чтобы сделать его стильным.
Без конкретных примеров кода вы можете просмотреть содержимое объекта события (я предполагаю, что вы делаете это в событии onmouseover).
Свойства clientX и clientY для это должно помочь
. Для объекта события проверьте следующее:
Думаю, это может вам помочь.
<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>