learnJavaScript/tooltip2.html at main · mikebars1995/learnJavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
        body {
            height: 2000px;
            /* подсказка должна работать и после прокрутки страницы */
        }

        .tooltip {
            position: fixed;
            z-index: 100;

            padding: 10px 20px;

            border: 1px solid #b3c9ce;
            border-radius: 4px;
            text-align: center;
            font: italic 14px/1.3 sans-serif;
            color: #333;
            background: #fff;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
        }

        #house {
            margin-top: 50px;
            width: 400px;
            border: 1px solid brown;
        }

        #roof {
            width: 0;
            height: 0;
            border-left: 200px solid transparent;
            border-right: 200px solid transparent;
            border-bottom: 20px solid brown;
            margin-top: -20px;
        }

        p {
            text-align: justify;
            margin: 10px 3px;
        }
    </style>
</head>

<body>


    <div data-tooltip="Здесь домашний интерьер" id="house">
        <div data-tooltip="Здесь крыша" id="roof"></div>

        <p>Жили-были на свете три поросенка. Три брата. Все одинакового роста, кругленькие, розовые, с одинаковыми
            веселыми хвостиками.</p>

        <p>Даже имена у них были похожи. Звали поросят: Ниф-Ниф, Нуф-Нуф и Наф-Наф. Все лето они кувыркались в зеленой
            траве, грелись на солнышке, нежились в лужах.</p>

        <p>Но вот наступила осень. Солнце уже не так сильно припекало, серые облака тянулись над пожелтевшим лесом.</p>

        <p>- Пора нам подумать о зиме, - сказал как-то Наф-Наф. <a
                href="https://ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%B8_%D0%BF%D0%BE%D1%80%D0%BE%D1%81%D1%91%D0%BD%D0%BA%D0%B0"
                data-tooltip="Читать далее…">Наведи курсор на меня</a></p>

    </div>

    <script>
        let tooltip;

        document.onmouseover = function (event) {
            // важно: быстро движущийся курсор может прыгнуть сразу к дочернему элементу, пропустив родительский
            // так что событие mouseover произойдёт сразу на дочернем элементе.

            let anchorElem = event.target.closest('[data-tooltip]');

            if (!anchorElem) return;

            // показываем подсказку и запоминаем её
            tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
        }

        document.onmouseout = function () {
            // возможно такое, что произошло событие mouseout, но мы всё ещё внутри элемента
            // (оно было где-то внутри и всплыло)
            // но в этом случае сразу же последует событие mouseover,
            // то есть подсказка исчезнет и потом снова покажется
            //
            // к счастью, этого не будет видно,
            // так как оба события происходят почти одновременно
            if (tooltip) {
                tooltip.remove();
                tooltip = false;
            }

        }


        function showTooltip(anchorElem, html) {
            let tooltipElem = document.createElement('div');
            tooltipElem.className = 'tooltip';
            tooltipElem.innerHTML = html;
            document.body.append(tooltipElem);

            let coords = anchorElem.getBoundingClientRect();

            // позиционируем подсказку над центром элемента
            let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
            if (left < 0) left = 0;

            let top = coords.top - tooltipElem.offsetHeight - 5;
            if (top < 0) {
                top = coords.top + anchorElem.offsetHeight + 5;
            }

            tooltipElem.style.left = left + 'px';
            tooltipElem.style.top = top + 'px';

            return tooltipElem;
        }


    </script>

</body>

</html>