Tooltips Appear At the Top Of the Page


Here, I am trying to make it so that when you hover over one of the planes (created with FontAwesome), a tooltip appears directly above it with some text. I have tried multiple times to do so, but was unsuccessful as it appeared instead at the top of the page.

If anyone could figure out the problem, I’d appreciate it very much.


I don’t see any tooltips at all, or any code I would expect to create them. :confused:

Sorry, updated!

What triggers the visibility of the tooltop? What makes it show up?

If you have overflow hidden on .plane then how can a tooltip display outside of it?


You;ll also have to ensure the z-index of the tooltip is higher than other elements because if the plane is under something you won’t be able to hover it.

I can see the tooltip if I use this code.

  .plane1 {
    position: absolute;
    font-size: 88px;
    margin-left: 180px; 
    display: inline-block;
    transform: rotate(-3deg);
    color: #8cffda;

Although you still have a lot of styling to do on that tip as it inherits the font-size etc and is much too big and rotated.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.