Как определить текст всплывающей подсказки в CSS? - PullRequest
Новая
       0

Как определить текст всплывающей подсказки в CSS?

0 голосов
/ 05 марта 2020

Мне бы хотелось, чтобы текст всплывающей подсказки был полностью указан CSS, а не в динамической c - html части моего приложения, чтобы стилизация и код могли быть полностью отделимыми (я беру обратите внимание, что сообщения всплывающей подсказки могут беспокоить UX-отдел или, по крайней мере, стороннего пользователя, и им не нужно взламывать генерирующий JavaScript код для изменения подсказки).

Ожидается, что следующий код не будет работать полностью, но он вообще не работает: 

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:after {
  content: "foo bar";
}
.tooltip:hover .tooltip:after {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
</div>

</body>
</html>

В частности, хотя я определил содержимое после, он не отображается при наведении: 

.tooltip:after {
  content: "foo bar";
}
.tooltip:hover .tooltip:after {
  visibility: visible;
}

Для справки, это было изменено из примера w3schools

Не уверен, что этот старый ответ все еще применим, поскольку он может предшествовать псевдоэлементам: Подсказки, только CSS, Показать текстовую подсказку при наведении мыши, используя класс для определения текста

Ответы [ 3 ]

1 голос
/ 05 марта 2020

Я считаю, что ваша проблема заключается в следующем селекторе:

.tooltip:hover .tooltip:after

Этот селектор CSS применяется к элементу с классом 'tooltip', который находится в родительском элементе, который также имеет класс «подсказка». Вы, вероятно, хотите:

.tooltip:hover::after

(Обратите внимание, что это не будет работать точно с вашим примером кода, потому что он применяет стиль к .tooltip .tooltiptext, который также не существует. Вы, вероятно, значит .tooltip::after и здесь.)

1 голос
/ 05 марта 2020

Вот рабочая версия примера в вашем вопросе. 

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip:after {
  opacity: 0;
}


.tooltip:hover:after {
  content: "foo bar";
  opacity: 1;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 0 6px 6px 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  margin: 0.5rem 0 0 0.5rem;
  z-index: 1;
}
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me</div>
1 голос
/ 05 марта 2020

вот вам go: 

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip:after {
  content: "foo bar";
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  display: none;
  text-align: center;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  padding: 2px;
}
.tooltip:hover:after {
  display: block;
}
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>

Если вы хотите изменить положение / вид самой подсказки, измените стиль этой части: .tooltip:after {}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...