How to Change the Style of the "title" Attribute Within an Anchor Tag

The display of the title attribute varies across browsers. We cannot apply custom styles to the native tooltip it generates. However, it’s possible to create a similar effect using other attributes. In this snippet, we’ll demonstrate how to do this.

Create HTML

Use an <a> tag with the href attribute. Also, add a class attribute with the name “tooltip”.
Place a <span> element inside the <a> tag.

How to Change the Style of the “title” Attribute Inside an Anchor Tag

html

<a href="#" class="tooltip">Link
  <span>CSS tooltip showing up when your mouse over the link</span>
</a>

Add CSS

Set the border-bottom and text-decoration properties for the class attribute of the <a> tag.
Add the :hover pseudo-class to the class attribute of the <a> tag. Set the cursor and position properties.
Set the display to "none" for the <span> element inside the <a> tag.

Now we’ll add the rest of our CSS for showing the tooltip.

How to Change the Style of the “title” Attribute Inside an Anchor Tag

css

a.tooltip {
  border-bottom: 1px dashed;
  text-decoration: none;
}
a.tooltip:hover {
  cursor: help;
  position: relative;
}
a.tooltip span {
  display: none;
}
a.tooltip:hover span {
  border: #666 2px dotted;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 100;
  background: #e3e3e3;
  left: 0px;
  margin: 15px;
  width: 300px;
  position: absolute;
  top: 15px;
  text-decoration: none;
}

Let’s see the result of our code.

Example of styling the tooltip inside an anchor tag:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a.tooltip {
        border-bottom: 1px dashed;
        text-decoration: none;
      }
      a.tooltip:hover {
        cursor: help;
        position: relative;
      }
      a.tooltip span {
        display: none;
      }
      a.tooltip:hover span {
        border: #666 2px dotted;
        padding: 5px 20px 5px 5px;
        display: block;
        z-index: 100;
        background: #e3e3e3;
        left: 0px;
        margin: 15px;
        width: 300px;
        position: absolute;
        top: 15px;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#" class="tooltip">Mouse over the link
      <span>CSS tooltip showing up when your mouse over the link</span>
    </a>
  </body>
</html>

Result

As you can see in the example above, our anchor contains a <span> with the content of the tooltip.

It is also possible to create a pseudo-tooltip with CSS and a custom attribute. For this, in our next example, we use the data-* attributes, particularly the data-title attribute. We also need to add the :after (or :before) pseudo-element, which contains the attribute’s value using attr().

Example of styling the tooltip using the :after pseudo-element:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      [data-title]:hover:after {
        opacity: 1;
        transition: all 0.1s ease 0.5s;
        visibility: visible;
      }
      [data-title]:after {
        content: attr(data-title);
        position: absolute;
        bottom: -1.6em;
        left: 100%;
        padding: 4px 4px 4px 8px;
        color: #666;
        white-space: nowrap;
        border-radius: 5px;
        box-shadow: 0px 0px 4px #666;
        background-image: linear-gradient(to bottom, #f0eded, #bfbdbd);
        opacity: 0;
        z-index: 99999;
        visibility: hidden;
      }
      [data-title] {
        position: relative;
      }
    </style>
  </head>
  <body>
    <p>
      <a href="#" data-title="Example"> Link </a> with styled tooltip
    </p>
    <p>
      <a href="#" title="Example"> Link </a> with normal tooltip
    </p>
  </body>
</html>

How to Change the Style of the "title" Attribute Within an Anchor Tag ​

Create HTML ​

Add CSS ​

Example of styling the tooltip inside an anchor tag: ​

Result ​

Example of styling the tooltip using the :after pseudo-element: ​

How to Change the Style of the "title" Attribute Within an Anchor Tag

Create HTML

Add CSS

Example of styling the tooltip inside an anchor tag:

Result

Example of styling the tooltip using the :after pseudo-element: