Улучшенная подсказка

@Whitecolor · Регистрация: 10.03.2012

Студворк — интернет-сервис помощи студентам

Отображать подсказку над элементом с атрибутом data-tooltip. Значение атрибута должно становиться текстом подсказки. Показываться должна подсказка на самом глубоко вложенном элементе. Только одна подсказка может быть показана в любой момент времени.

PHP/HTML
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
<!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>
</body>
</html>

krvsa · 03.07.2024, 12:02

Х/з, может я не совсем правильно понял что именно нужно...
Но предложу такой вариант.

Кликните здесь для просмотра всего текста

PHP/HTML
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
<!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>
const obj = {
    txt: null,
    del() {
        const o = document.querySelector('.tooltip')
        if (o) o.remove()
        this.txt = null
    },
    act(e) {
        const o = e.target
        let v = o?.dataset?.tooltip
        if (!v) v = o.closest('[data-tooltip]')?.dataset?.tooltip
        if (v === this.txt) return
        this.txt = v
        this.tooltip()
    },
    tooltip() {
        let o = document.querySelector('.tooltip')
        if (o) {
            o.textContent = this.txt
            return
        }
        o = document.createElement('aside')
        o.classList.add('tooltip')
        o.textContent = this.txt
        document.body.insertAdjacentElement('beforeend', o)
    }
}
house.addEventListener('mousemove', e => obj.act(e))
house.addEventListener('mouseleave', _ => obj.del())
</script>
</body>
</html>

Добавлено через 10 минут
Тот же вариант но с классом...

Кликните здесь для просмотра всего текста

JavaScript
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
class Action {
    txt = null
    constructor(el) {
        this.act = this.act.bind(this)
        this.del = this.del.bind(this)
        el.addEventListener('mousemove', this.act)
        el.addEventListener('mouseleave', this.del)
    }
    del() {
        const o = document.querySelector('.tooltip')
        if (o) o.remove()
        this.txt = null
    }
    act(e) {
        const o = e.target
        let v = o?.dataset?.tooltip
        if (!v) v = o.closest('[data-tooltip]')?.dataset?.tooltip
        if (v === this.txt) return
        this.txt = v
        this.tooltip()
    }
    tooltip() {
        let o = document.querySelector('.tooltip')
        if (o) {
            o.textContent = this.txt
            return
        }
        o = document.createElement('aside')
        o.classList.add('tooltip')
        o.textContent = this.txt
        document.body.insertAdjacentElement('beforeend', o)
    }
}
new Action(house)

@Whitecolor · 03.07.2024, 17:49 **[ТС]**

krvsa, Да, спасибо, только сверху отображаться должна

krvsa · 03.07.2024, 21:48

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

только сверху отображаться должна

Какой у тебя css был - такой я и использовал...

@Whitecolor · 04.07.2024, 11:48 **[ТС]**

PHP/HTML
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
<!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) {
      let anchorElem = event.target.closest('[data-tooltip]');
      if (!anchorElem) return;
      tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
    }
    document.onmouseout = function() {
      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>

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Whitecolor 1185 / 755 / 127 Регистрация: 10.03.2012 Сообщений: 4,853
	03.07.2024, 17:49 [ТС]
	krvsa, Да, спасибо, только сверху отображаться должна 0

Улучшенная подсказка

Решение