W3docs
en
Log in

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

Since actually, we cannot style the “title” attribute inside an anchor tag, we suggest using some other methods of styling the tooltip inside an anchor tag.

Tags

The display of the <span class="attribute">title</span> 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 <span class="attribute">href</span> attribute. Also, add a <span class="attribute">class</span> 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

<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 <span class="attribute">class</span> attribute of the <a> tag.
  • Add the :hover pseudo-class to the <span class="attribute">class</span> 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

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>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> <a href="#" class="tooltip">Mouse over the link <span>CSS tooltip showing up when your mouse over the link</span> </a> </div> 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 <span class="attribute">data-*</span> attributes, particularly the <span class="attribute">data-title</span> 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;
        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>
Try it Yourself »