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

How the text of the title attribute is displayed depends on the browser. It can vary from browser to browser. We cannot apply the style we want to the tooltip that is displayed based on the title attribute. However, it’s possible to create something similar to it with other attributes. In this snippet, we’ll demonstrate some examples of doing 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.
<a href="#" class="tooltip">Link
  <span>CSS tooltip showing up when your mouse over the link</span>
</a>

Add CSS

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

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:

<!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

Mouse over the link CSS tooltip showing up when your mouse over the link

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:

<!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;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0px 0px 4px #666;
        -webkit-box-shadow: 0px 0px 4px #666;
        box-shadow: 0px 0px 4px #666;
        background-image: -moz-linear-gradient(top, #f0eded, #bfbdbd);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0eded), color-stop(1, #bfbdbd));
        background-image: -webkit-linear-gradient(top, #f0eded, #bfbdbd);
        background-image: -moz-linear-gradient(top, #f0eded, #bfbdbd);
        background-image: -ms-linear-gradient(top, #f0eded, #bfbdbd);
        background-image: -o-linear-gradient(top, #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>