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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 27.10.2018, 17:01   #1
s88s
Форумчанин
 
Регистрация: 02.01.2014
Сообщений: 369
По умолчанию Tooltip на HTML и CSS

Доброго времени суток!

Помогите решить один вопрос сижу туплю и не понимаю что надо сделать.

Есть у меня восемь ссылок в div блоке

Код:
<div>

<center>

<span tooltip="Подсказка 1"><a href="#"><img src="../img/1.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 2"><a href="#"><img src="../img/2.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 3"><a href="#"><img src="../img/3.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 4"><a href="#"><img src="../img/4.png" width="64" height="64"></a></span>

<span tooltip="Подсказка 5"><a href="#"><img src="../img/5.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 6"><a href="#"><img src="../img/6.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 7"><a href="#"><img src="../img/7.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 8"><a href="#"><img src="../img/8.png" width="64" height="64"></a></span>

</center>

</div>
Для них я делаю tooltip расположенного в span. Tooltip написан на чистом HTML и CSS без каких либо JS, AJAX и тд.

Вот к ним сss

Код:
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
  margin: 0 0 5px 0;
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  margin: 0 0 5px 0;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
border:1px solid red;
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;

}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  -webkit-transform: translate(-50%, -.5em);
          transform: translate(-50%, -.5em);
}



/* KEYFRAMES */
@-webkit-keyframes tooltips-vert {
  to {
    opacity: .9;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
    opacity: .9;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

@-webkit-keyframes tooltips-horz {
  to {
    opacity: .9;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after {
  -webkit-animation: tooltips-vert 900ms ease-out forwards;
          animation: tooltips-vert 900ms ease-out forwards;
}
Работает всё нормально только за исключение одного НО на скрине я нарисовал восемь ссылок и при наведении мышкой появляется подсказки как и надо они отмечены зеленым цветом а вот у ссылки под номером пять tooltip появляется над первым рядом ссылок справа на рисунке отмечен красным цветом и если я пропишу перед пятой ссылкой <br> то Tooltip будет как и надо над пятой ссылкой но отображение на разных разрешениях у меня будет на так как бы мне хотелось от сюда вопрос как при автоматическом переносе ссылки перенести эту подсказку без использования в коде дополнительных переносов таких как <br> ???

PS Это случается с любой ссылкой которая переносится автоматически из-за нехватки места будь это пятая или девятая или же тринадцатая у всех у них ToolTip будет появляться на ряд выше справа то есть у пятой ссылке при расположении во втором ряду Tooltip будет в первом ряду справа у девятой ссылки расположенной в третьем ряду Tooltip будет появляться во втором ряду справа у тринадцатой ссылке расположенной в четвертом ряду Tooltip появиться в третьем ряду справа и тд.
Изображения
Тип файла: png tooltip.png (14.3 Кб, 37 просмотров)
"Я не волшебник, я только учусь"

Последний раз редактировалось s88s; 27.10.2018 в 17:10.
s88s вне форума Ответить с цитированием
Старый 28.10.2018, 01:34   #2
s88s
Форумчанин
 
Регистрация: 02.01.2014
Сообщений: 369
По умолчанию

Вопрос решен. Заменил на другой Tooltip.

Тема закрыта!
"Я не волшебник, я только учусь"
s88s вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML и CSS hockeyman Общие вопросы Web 0 16.05.2017 23:23
HTML, CSS - Управление CSS анимацией HTML+CSS+JS dobryc HTML и CSS 1 18.11.2014 05:58
Webbrowser + HTML + css GAGARIN-NEW Компоненты Delphi 9 17.10.2008 01:15