Text to appear on highlighted cell HTML

Question

Text to appear on highlighted cell HTML

Jctech2025 5

Hi Community,

Not sure how to ask this, but I been building a website which is coming along good. I was able to figure out how to add a top navigation bar to the page. I went through various sites trying to learn on my own. What I'm wanting to happen is when say the user Highlights "What we do:" in the top bar, a new window below appears with the text I wrote. As soon as the cell is not highlighted the window goes away. I have seen it before on other sites and hoping with the right instructions I can make this happen too.

<div class="tooltip">What We do:

</div>

Thoughts appreciated

0 comments

1 answer

Your answer

Answer 1

Use a tooltip-style pattern with HTML and CSS so the text appears only while the item is hovered (highlighted) and disappears when the mouse leaves.

Example structure based on the HTML basics pattern:

<!DOCTYPE html>
<html>
<head>
    <title>Top HTML Tags</title>
    <style>
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a, .navbar .tooltip {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            position: relative; /* needed for tooltip positioning */
        }

        .tooltiptext {
            visibility: hidden;
            background-color: #555;
            color: #fff;
            text-align: left;
            padding: 8px;
            border-radius: 4px;

            /* position the window below the highlighted text */
            position: absolute;
            left: 0;
            top: 100%;
            z-index: 1;
        }

        /* show the window when the cell is highlighted (hovered) */
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
</head>
<body>

<div class="navbar">
  <a href="#home">TBD</a>
  <a href="#news">TBD</a>
  <a href="#news">|</a>

  <div class="tooltip">What we do:
    <span class="tooltiptext">Text Here</span>
  </div>
</div>

</body>
</html>

Key points:

Wrap the label (What we do:) and the hidden text (Text Here) in a container (div.tooltip).
Use a nested element (span.tooltiptext) for the window that appears.
Hide the window by default (visibility: hidden).
Show it only when the parent is hovered (.tooltip:hover .tooltiptext { visibility: visible; }).
Use position: relative on the parent and position: absolute on the tooltip text to place the window directly below the highlighted item.

This keeps the extra text visible only while the user is highlighting/hovering over the "What we do:" item.

References:

HTML Basics