Форум

Artemyi · #1 (**permalink**) 19.10.2022, 16:30

Есть скрипт всплывающей подсказки https://codepen.io/lamer95/pen/RwymmqX который работает с одной подсказкой. Все работает как нужно. Но я хочу добавить еще подсказки.
Подскажите, как переделать скрипт так, что каждый раз не нужно было его клонировать на переделывать на другие id?

ksa · #2 (**permalink**) 19.10.2022, 17:18

Сообщение от Artemyi

как переделать скрипт

Как вариант...

<!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>

ksa · #3 (**permalink**) 19.10.2022, 17:20

Artemyi, тут не особо видно подсказку...
Нужно копировать и делать отдельный файл и уже его запускать.

рони · #4 (**permalink**) 19.10.2022, 17:21

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>

Artemyi · #5 (**permalink**) 20.10.2022, 15:37

Спасибо

Форум

Справочник

Discord чат

Курсы javascript