Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 02.05.2019, 19:21   #1
Ivan912
Пользователь
 
Регистрация: 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.
Ivan912 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вопрос по 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