HTML CSS Extend Tooltip Functionality

The default method of using a tooltip in HTML is just adding a title to your element in your class like this:

    <div class="container">
        <div><a href="index.html" target="_blank" title="home"> home </a></div>
    </div>

The result of this example default tooltip "home" looks like this:

But you can not style it and it shows the tooltip with a delay.

To give some more style to the tooltip when can use some specific CSS code like this:

a.tooltip span {
    text-decoration: none;
    text-rendering: auto;
    text-align: center;
    font-size: 14px;
    font-family: 'Raleway bold', sans-serif;
    font-weight: bolder;
    color: white;
    content: attr(title);
    position: absolute;
    padding: 2px;
    bottom: 60px;
    left: 45%;
    width: 76px;
    line-height: 20px;
    z-index: 1;
    border: 1px solid white;
    border-radius: 6px;
    background: #000000FF;
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease-out 0s;
}

In your HTML code it can look like this:

<div class="footer">
    <div class="media">
        <i> <a href="https://github.com/RobertoTorino" class="fab fa-github tooltip" target="_blank" style="color: #545454"> <span>github</span></a></i>
    </div>

The result is a fluent tooltip that popups immediately when the mouse is on the element. And you can style it in whatever way you want, this is just an example.