Как сделать так, чтобы метка всплывала, когда текст зависал над ней, используя только css

ProgramBox

Как сделать так, чтобы метка всплывала, когда текст зависал над ней, используя только css

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#html #css #asciidoc #antora

Вопрос:

У меня есть список ссылок в левой части страницы. Я хотел бы улучшить этот список, чтобы при наведении курсора на элемент в этом списке появлялась какая-то метка, дающая краткое описание того, на что указывает ссылка. Рассматриваемый html-код генерируется автоматически с использованием Antora из источников AsciiDoc, и, насколько я вижу, все, что я могу сделать, это добавить класс css или идентификатор для различных частей текста ссылки, выделенных жирным шрифтом. Я не могу добавить какие-либо классы Javascript или вложенные css.

Итак, вот моя попытка:

 <!DOCTYPE html>
<html>
<head>
<style>

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

#Bob.tooltiptext {
  font-size: 5px;
}

#Bob.tooltiptext:hover {
  visibility: visible;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 10px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>

<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong> 
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>

</body>
</html>

Очевидно, что это не достигает того, чего я хочу. Все, что он делает, — это один бит текста мелким шрифтом, который, когда я его переворачиваю, увеличивается до более крупного шрифта в виде коробки.

Если кто-нибудь может придумать какой-нибудь способ, чтобы ярлык появлялся по какой-нибудь ссылке на странице, даже используя какой-то совершенно другой подход, о котором я не думал, я был бы благодарен. Обратите внимание, что у меня будет около 200 ссылок, поэтому, если у меня будет решение, которое не потребует от меня наличия набора свойств css для каждого отдельного идентификатора для каждой ссылки, это было бы предпочтительнее.

Если какой-либо из этих вопросов неясен, пожалуйста, не стесняйтесь спрашивать меня.

Ответ №1:

Простая подсказка может быть достигнута с помощью title атрибута usi: информация отображается в виде текста подсказки при наведении мыши на элемент.

 <a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong> 
</a>

Вы также можете создать свою собственную пользовательскую подсказку, используя content свойство для вставки сгенерированного содержимого. (описание каждой ссылки).

 .searchEngineLink {
  display: inline;
  position: relative;
}

.searchEngineLink:hover:after {
  background: #eee;
  
  border-radius: 5px;
  bottom: -34px;
  color: black;
  content: attr(gloss);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: auto;
  white-space:nowrap;
}

.searchEngineLink:hover:before {
  border: solid;
  border-color: #ddd transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 40%;
  position: absolute;
  z-index: 99;
}

 <a class="searchEngineLink"  gloss="What a great guy" href="http://www.bob.com">Bob</a>

<a class="searchEngineLink"  gloss="What a smart guy" href="http://www.bob.com">Bob2</a>

<br>

<a class="searchEngineLink"  gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>

1. Спасибо за ваше предложение. Однако я не могу добавить какой-либо новый html-тег (например, «глянец» или «заголовок») в существующий html-тег.

2. Понятно, жаль, что я это пропустил. Вы пробовали использовать это ? Но для этого все равно требуется уникальный диапазон для каждой ссылки (разные описания для каждой ссылки).

3. Привет, наличие уникального диапазона для каждой ссылки означает, что в моем случае это невозможно (у меня будет не менее 600 подобных ссылок, и новые регулярно добавляются и удаляются, поэтому мне придется постоянно обновлять свойства css, чтобы отразить это).

Метки: используя только CSS?, Как сделать так, когда текст зависал над ней, чтобы метка всплывала