1

I have a list of links on the left hand side of the page. I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.

So here is my attempt:

<!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>

This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.

If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.

If any of the this question is not clear, please feel free to ask me.

didjek
  • 393
  • 5
  • 16

1 Answers1

0

Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.

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

You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).

.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>
NcXNaV
  • 1,657
  • 4
  • 14
  • 23
  • Thanks for your suggestion. However, I am not able to add any new html tag (such as "gloss" or "title") into an existing html tag. – didjek Jul 12 '21 at 15:49
  • I see, sorry I missed it. Have you tried using [this](https://www.w3schools.com/css/css_tooltip.asp). But this still requires unique span for each link (different descriptions for each link). – NcXNaV Jul 12 '21 at 15:59
  • Hi, having a unique span for each link means it is not workable in my case (I will have at least 600 links like this and new ones are being added and removed regularly, so I would have to continuously be updating the css properties to reflect it). – didjek Jul 15 '21 at 09:58