How to customise the tooltip style of an anchor link using pure CSS

Last updated on

This tutorial will guide you how to customise the tooltip style of an anchor link using pure CSS. A created demo is as follows:

Wonder Plugins

In web browsers, if an anchor link has a title attribute, when you place the mouse on the link, it will display a tooltip after several seconds of delay. The content of the tooltip is the text of the title attribute.

Anchor Link Tooltip

The tooltip is automatically generated by web browsers, it actually can not be removed or changed.

To change the tooltip style, we need to add a tooltip text to a different attribute, for example data-title, then use CSS code to create and customise the style.

For example, we can use the following code to create a link:

<a class="tooltiplink" href="https://www.wonderplugin.com/downloads/" data-title="Download Wonder Plugins">Wonder Plugins</a>

Then use the following CSS to create the tooltip:

a.tooltiplink {
    position: relative;
}

a.tooltiplink:hover::after {
    content: attr(data-title);
    background-color: #8fbc8f;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
	line-height: 14px;
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
}

In WordPress, you can add the CSS code to your theme CSS.

The created demo is as follows:

Wonder Plugins