By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

:hover fails to display Tooltip

I am tasked with displaying Tooltips, my absolute first time in my xx years of programming, and I am unable to display them using "hover". Though the cursor changes as expected, the tooltip remains hidden upon hovering. I honestly don't know why. This is mainly for MS Edge though should, in theory, work as well for Firefox and Chrome (not a work requirement). I wrote a sample HTML page that fails:

 .tooltip-icon-style {
    color: #ffffff;
    background-color: #000000;
    font-weight: bold;
    font-family: Arial;
    font-size: 18px;
    margin: 10px;
    border-radius: 50%;

.tooltip-icon-style .tooltip  {
  visibility: hidden;
  width: 120px;
  background-color: #eeeeee;
  color: #000000;
  font-family: Arial;
  font-size: 10pt !important;
  font-weight: normal !important;
  text-align: center;
  border-radius: 6px;
  padding: 10px 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;

.tooltip-icon-style:hover {
    cursor: help;
    text-decoration: underline dotted;

.tooltip-icon-style:hover .tooltip {
    visibility: visible;
    opacity: 1;

.tooltip-icon-style .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;

<span class="tooltip-icon-style">&nbsp;?&nbsp;<span class="tooltip">Here is my tooltip!</span></span>

Help appreciated. I have looked online and found nothing that helped me understand my problem.

Try adding position: relative; to tooltip-icon-style.

The tooltip is probably too far up the page and not visible because you added bottom: 125%;, so it's 25% of the page's height above the page.
Adding position: relative; to tooltip-icon-style will make the 125% relative to the tooltip-icon-style rather than the entire body.

New Threads

Latest posts

Buy us a coffee!

Top Bottom