Скрипт всплывающей подсказки
Есть скрипт всплывающей подсказки https://codepen.io/lamer95/pen/RwymmqX который работает с одной подсказкой. Все работает как нужно. Но я хочу добавить еще подсказки.
Подскажите, как переделать скрипт так, что каждый раз не нужно было его клонировать на переделывать на другие id? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--
-->
<style>
.bottom-text
{
cursor:pointer;
text-align:center;
}
.txt
{
display:none;
border:1px solid #000;
width:300px;
padding:5px;
position:absolute;
background: white;
}
</style>
<script>
$(_ => {
$(".bottom-text").mousemove(function(e){
$(this).next().next().css({"display" : "block","left" : e.pageX-305+"px","top" : e.pageY+25+"px"});
}, function(e) {
$(this).next().next().css("display","none");
})
})
/*
document.addEventListener('DOMContentLoaded', _ => {
})
*/
</script>
</head>
<body>
<p class="bottom-text">Подсказка №1 ?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ... </p>
<p class="txt" style="display: none;">1 Текст подсказки который необходимо показать при наведение на знак вопроса</p>
<p class="bottom-text">Подсказка №2 ?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ... </p>
<p class="txt" style="display: none;">2 Текст подсказки который необходимо показать при наведение на знак вопроса</p>
</body>
</html>
|
Artemyi, тут не особо видно подсказку...
Нужно копировать и делать отдельный файл и уже его запускать. |
Artemyi,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bottom-text {
cursor: pointer;
text-align: center;
}
.txt {
display: none;
border: 1px solid #000;
width: 300px;
padding: 5px;
position: absolute;
background: white;
}
.bottom-text:hover+p+.txt {
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$(".bottom-text").mousemove(function(e) {
$(this).nextAll(".txt").css({
"left": e.pageX - 305 + "px",
"top": e.pageY + 25 + "px"
});
})
});
</script>
</head>
<body>
<p class="bottom-text">Подсказка №1 ?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ... </p>
<p class="txt">1 Текст подсказки который необходимо показать при наведение на знак вопроса</p>
<p class="bottom-text">Подсказка №2 ?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ... </p>
<p class="txt">2 Текст подсказки который необходимо показать при наведение на знак вопроса</p>
</body>
</html>
|
Спасибо:thanks:
|
| Часовой пояс GMT +3, время: 10:12. |