|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
02.05.2019, 19:21 | #1 |
Пользователь
Регистрация: 26.01.2019
Сообщений: 32
|
Tooltip не срабатывает
Как сделать чтобы подсказка срабатывала при наведение на картинку? пытался вот так сделать но не помогло im2a19.className = "i-have-a-tooltip";
Код HTML:
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Tooltip</title> <canvas id="canvas" width="1000" height="675"></canvas> <link rel="stylesheet" href="css/style.css"> </head> <body> <h2>CSS Tooltip Text</h2> <p> Hover over the text below </p> <div class="tooltip-container"> <div class="top-tooltip">Hover Over Me! <span class="top-tooltip-text"> Hi, i'm a tooltip </span> </div> <div class="bottom-tooltip">Hover Over Me! <span class="bottom-tooltip-text"> Hi, i'm a tooltip </span> </div> <div class="left-tooltip">Hover Over Me! <span class="left-tooltip-text"> Hi, i'm a tooltip </span> </div> <div class="right-tooltip">Hover Over Me! <span class="right-tooltip-text"> Hi, i'm a tooltip </div> </div> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); var im2a19 = new Image(); var wrapper = document.createElement('span'); wrapper.appendChild(im2a19); wrapper.id = 'm124'; im2a19.src = "https://mobimg.b-cdn.net/pic/v2/gallery/111x185/abstrakciya-fon-40429.jpg"; document.body.appendChild(wrapper); </script> </body> </html> #m124{ position: absolute; top: 200px; left:200px; } body { font-family: 'Open Sans', sans-serif; } h2, p { text-align: center; } /*===================== STYLING THE TOOLTIP =====================*/ .tooltip-container { width: 300px; margin-right: auto; margin-left: auto; margin-top: 50px; } /*=================== TOP TOOLTIP ===================*/ .top-tooltip { position: relative; display: inline-block; border: 2px solid #446cb3; padding: 10px; } .top-tooltip .top-tooltip-text { visibility: hidden; background-color: #595959; color: #fff; width: 120px; border-radius: 5px; padding: 5px; position: absolute; bottom: 120%; left: 50%; margin-left: -60px; } .top-tooltip:hover .top-tooltip-text { visibility: visible; } /*======================= ARROW for the TOOLTIP =======================*/ .top-tooltip .top-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #595959 transparent transparent transparent; } /*======================= END of TOP TOOLTIP =======================*/ /*====================== BOTTOM TOLTIP ======================*/ .bottom-tooltip { position: relative; display: inline-block; border: 2px solid #D24D57; padding: 10px; } .bottom-tooltip .bottom-tooltip-text { visibility: hidden; width: 120px; background-color: #595959; border-radius: 5px; color: #fff; padding: 5px 0; text-align: center; position: absolute; top: 120%; left: 50%; margin-left: -60px; } /*======================= ARROW for the TOOLTIP =======================*/ .bottom-tooltip .bottom-tooltip-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #595959 transparent; } /*========================= END of the ARROW =========================*/ .bottom-tooltip:hover .bottom-tooltip-text { visibility: visible; } /*======================= END of BOTTOM TOOLTIP =======================*/ /*======================= LEFT TOOLTIP =======================*/ .left-tooltip { position: relative; display: inline-block; border: 2px solid #2ECC71; margin-top: 50px; padding: 10px; } .left-tooltip .left-tooltip-text { visibility: hidden; background-color: #595959; color: #fff; width: 120px; text-align: center; border-radius: 5px; padding: 5px; position: absolute; top: 5px; right: 110%; } .left-tooltip .left-tooltip-text::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #555; } .left-tooltip:hover .left-tooltip-text { visibility: visible; } /*======================= END of LEFT TOOLTIP =======================*/ /*======================= RIGHT TOOLTIP =======================*/ .right-tooltip { position: relative; display: inline-block; border: 2px solid #F27935; padding: 10px; } .right-tooltip .right-tooltip-text { visibility: hidden; background-color: #595959; width: 120px; color: #fff; border-radius: 5px; padding: 5px; text-align: center; position: absolute; top: 5px; left: 110%; } .right-tooltip .right-tooltip-text::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #595959 transparent transparent; } .right-tooltip:hover .right-tooltip-text { visibility: visible; } /*======================= END of RIGHT TOOLTIP =======================*/ Последний раз редактировалось Serge_Bliznykov; 02.05.2019 в 23:21. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
вопрос по ToolTip | kotbazilio | Общие вопросы .NET | 0 | 28.01.2019 11:50 |
tooltip на html и css | groc | HTML и CSS | 0 | 20.01.2019 01:51 |
Таймер срабатывает раньше времени или вообще не срабатывает | Terebonko | JavaScript, Ajax | 1 | 03.08.2017 11:48 |
TChart + Tooltip | Gregor | Компоненты Delphi | 1 | 20.02.2016 21:00 |
Balloon Tooltip | KiL0z | Общие вопросы Delphi | 2 | 18.06.2011 13:29 |