To create a customized tooltip using CSS

To create a customized tooltip we generally use a third party JavaScript plug in.

Below is a simple trick to create a customized tooltip using CSS only:

<div class="parent">

    My custom tooltip

    <span class="tooltip">This is the tooltip, using CSS!!</span>

</div>

<style type="text/css">

    .parent:hover .tooltip

    {

        display: block;

    }

   

    .tooltip

    {

        display: none;

        color: black;

        margin-left: 20px; /* moves the tooltip to the right */

        margin-top: 0px; /* moves it down */

        position: absolute;

        z-index: 1000;

        background-color: #fdfbbe;

        border: 1px solid black;

        padding: 5px;

    }

</style>

Output: