Эффективное отображение подсказок HTML (повторное использование подсказок) - PullRequest
Новая
       9

Эффективное отображение подсказок HTML (повторное использование подсказок)

0 голосов
/ 18 января 2019

Я создаю HTML, который отображает записи на уровне поля (например, имя, доб, любимый язык программирования и т. Д.), И создаю подсказки HTML для каждого поля.

Я знаю, что заголовки можно использовать, но я отображаю различные типы записей и хотел бы дать пользователю быструю подсказку, чтобы показать им, на что они смотрят.

Это отлично работает для небольшого количества записей, но когда у меня тысячи записей, html во многом состоит из одних и тех же данных всплывающей подсказки снова и снова.

Я бы хотел как-то предварительно создать эти всплывающие подсказки в css или javascript, чтобы отображать фактическое содержание всплывающей подсказки только один раз на странице, но можно повторно использовать, указав класс (или аналогичный).

Например, дано: 

<div class="field tooltip">bar<span class="tooltiptext">This
 field represents what foo needs</span></div>

Я бы хотел использовать что-то вроде этого: 

<div class="field tooltip tt-bar">bar</div>

где tt-bar относится к всплывающей подсказке, созданной с использованием CSS и / или JavaScript.

Любые идеи будут очень признательны.

Примечание: Я не использую JQuery или какие-либо другие библиотеки, и я бы хотел, чтобы это продолжалось.

1 Ответ

0 голосов
/ 18 января 2019

Вот довольно быстрое и грязное решение с использованием только CSS. 

*[data-tooltip] {
  text-decoration: underline dashed;
  position: relative;
}

*[data-tooltip]:hover:before {
  background: #333;
  border-radius: 4px;
  color: #ccc;
  content: attr(data-tooltip);
  padding: 2px 4px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 4px);
}

*[data-tooltip]:hover:after {
  background: #333;
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 1px);
  left: 8px;
  transform: rotate(45deg);
}
foo <span data-tooltip="This field represents what foo needs">bar</span> baz

Если ваш текст всплывающей подсказки известен, вы даже можете избавиться от атрибута data-tooltip и вставить его в свойство content в CSS: 

.tooltip {
  text-decoration: underline dashed;
  position: relative;
}

.tooltip:hover:before {
  background: #333;
  border-radius: 4px;
  color: #ccc;
  padding: 2px 4px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 4px);
}

.tooltip:hover:after {
  background: #333;
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  white-space: nowrap;
  top: calc(100% + 1px);
  left: 8px;
  transform: rotate(45deg);
}

.tooltip.tt-bar:hover:before {
  content: 'This field represents what foo needs';
}
foo <span class="field tooltip tt-bar">bar</span> baz
...