When we talk about hover text in HTML and CSS, we simply mean a tooltip that shows up when we mouse over a text, link, button, or any element on a webpage.

In other words, these are small pieces of text that show up when you hover your mouse pointer over an element as shown in the image below.

hover text output example 2

The purpose of these hover text or tooltips is to provide additional information about the element, topic, or text. And using it is a really helpful tactic when you want to guide the user about different things on a webpage.

This tutorial is focused on creating and customizing the hover text or tooltips using HTML and CSS. And no JavaScript is needed! Just HTML and CSS. So, let’s begin without wasting time 👉.

Creating Hover Text with HTML and CSS

There are three different methods of creating hover text:

  1. Creating Hover Text using the HTML title Attribute
  2. Hover Text with just CSS by using pseudo-elements
  3. Creating Hover Text using different CSS properties

Method 1: Hover Text using the HTML title Attribute

By default, HTML gives us the title attribute to display a hover text or hover tooltip when we mouse over the element. It’s the simplest method!

The first thing you need is any HTML element to which you will attach a hover text. I will take <a> the anchor element. Secondly, define a hover text using the title attribute as you can see below in the code.

→ index.html

<a href="#" title="your text will show here!">Hover over Me</a>

Note: The title attribute works with any element whether it’s <a>, <div>, <p>, or any other HTML element.

The text I used inside the title attribute is a demo text so don’t forget to replace it with your own text.

If you see the output below then it’s a really simple text link that shows a small tooltip with the text “your text will show here!” when you will hover over or mouse over the link.

hover text output pic

Let’s apply some CSS to make it better.

The following CSS code will make a button with a dodgerblue background and some padding.

→ style.css

a{
    background-color: dodgerblue;
    color: #ffffff;
    padding: 10px;
    text-decoration: none;
}

Output:

hover text output example

If you are not interested in using the title attribute then don’t worry just try the second method. Let’s see that.

Method 2: Hover Text using only CSS

We can use CSS pseudo-elements like ::before or ::after for creating hover text. All you need is an HTML element defined already to which you will attach a hover text using CSS.

I have the same <a> element, but this time I’m not using any title attribute as you can see in the code below.

→ index.html

<a href="#">Hover over Me</a>

I will use the following CSS code to make a hover text or tooltip:

→ style.css

a:hover::before {
    content: "This is your tooltip or hover Text!";
    background-color: #333;
    color: #fff;
    padding: 5px;
    position: absolute;
    display: none;
    top: 50px;
    left: 100px;
}

a:hover::before {
display: block;
}

CSS Code Explanation:

  • First, I used :hover on <a> element with the pseudo-class ::before and selected the HTML element.
  • The CSS content property that I used is for specifying the text for the tooltip. In the above demonstration, I’m using demo text, but you can use your custom text.
  • Then, I applied background-color, color, and padding to style the hover text box.
  • After that, I positioned the tooltip absolute. And set the display to none to hide the tooltip initially.
  • The top and left properties are for specifying the tooltip position
  • Secondly, I used a:hover::before again and used the display property and set it to block so that when the user hovers over the element, a hover text box or tooltip should show up.

Code Output:

creating hover using css

Let’s see the third most suitable method for creating Hover text with HTML CSS.

Tip: if you want then you can learn more about pseudo-elements in this tutorial about CSS pseudo-elements.

Method 3: Hover Text using both HTML and CSS

To create hover text with CSS, first, you need two HTML elements. Where one HTML element will be for mouse over and an additional element inside that element will contain the text that will only display when you mouse over the element.

The following is the HTML code for that:

→ index.html

<a href="#" class="hover-container">Hover over Me
    <span class="hover-text">Your Hover Text will show Here!</span>
</a>

In the above code, I have an anchor element <a> with the class=”hover-container“ and <span> element with a class=”hover-text“ which is enclosed inside anchor tags <a>.

Now, I will use some CSS rules to convert the HTML structure to a beautiful button with hover text or a tooltip.

→ style.css

/* Hover Container */
.hover-container{
    padding: 10px;
    background-color: antiquewhite;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    /* position relative is Crucial */
    position: relative;
}

/* Hover Text or ToolTip */
.hover-text {
    /* basic styling */
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    width: 300px;
    /* crucial styles */
    position: absolute;
    top: 110%;
    left: 50%;
    display: none;
}

/* Display When Hover */
.hover-container:hover .hover-text {
  display: block;
}

Tip:

If you don’t know about creating buttons with Links then you can check this tutorial about creating HTML buttons with Links.

CSS Code Explanation:

First, I used the CSS class selector to select the hover-container and applied the following styles:

  1. First I used some basic styling properties to make the link look like a button. For this, I used background-color, padding, color, border-radius, font-weight, and text-decoration properties.
  2. Then, I used position: relative; which will position the anchor element relative.

Second, I used the CSS class selector to select the hover-text container and applied the following styles:

  1. First, I used some basic styling properties to style our hover text box or tooltip. For this, I used background-color, color, padding, border-radius, and width properties.
  2. Then, I used some position: absolute; which will position the element absolute to its parent container.
  3. The top and left properties are used for setting the position of the .hover-text container.
  4. And the display: none; the property will hide the hover text box.

Third, I used :hover CSS pseudo-class on .hover-container and .hover-text which will display the tooltip or hover text box when you mouse over the text link or button.

Code Output:

hover text output example 2

So, this is how you can make hover text using HTML CSS. Hope you liked it.

Don’t forget to help others by sharing this tutorial!