1

Basically, I have been trying to incorporate this "thing" (I don't know what to call it)

I've tried searching HTML popup thing but the results are not what I want.

For example, in the Minecraft wiki, when you hover over an item, a popup occurs showing the item name, etc

What is that popup "thing" called so I can search the web about how to add it?

1 Answers1

1

It's called a CSS Tooltip, and it is "a common graphical user interface element displayed as an informational text box when hovering over an item. It is used in conjunction with a cursor, usually a pointer."Wikipedia

You can see the tooltip effect here:

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  border:3px solid black;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  background-color:white;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<!DOCTYPE html>
<html>

<body style="text-align:center;">

<h1>Tooltip Example</h1>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>
Spectric
  • 30,714
  • 6
  • 20
  • 43