JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<body>  <br /> <br /> <br /><br />


<p align="center">Hi, <a href="#" bubbletooltip="Hi I am a bubble tooltip">This is a demo </a></p>

</body>

CSS

a[bubbletooltip]:link, a[bubbletooltip]:visited
        {
                text-decoration: none;
                position: relative;
                color : red;
        }

        a[bubbletooltip]:before
        {
                content: "";
                position: absolute;
                border-right: 21px solid #97a5db;
                border-top: 21px solid transparent;
                border-bottom: 21px solid transparent;
                visibility: hidden;
                bottom: -12px;
                right: -20px;
        }

        a[bubbletooltip]:after
        {
                position: absolute;
                content: attr(bubbletooltip);
                color: #FFF;
                font-weight:bold;
                right: -68px;
                bottom: -16px;
                width:40px;
                background: #97a5db;
                padding: 5px 10px;
                -moz-border-radius: 6px;
                -webkit-border-radius:6px;
                -khtml-border-radius:6px;
                border-radius: 6px;
                visibility: hidden;
        }

        a[bubbletooltip]:hover:before, a[bubbletooltip]:hover:after
        {
                visibility: visible;
                -moz-transition: visibility 0s linear .3s;
        }