JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css">
 

<button id="btn1" >paragraph</button>
<b class="tooltip">bold</b>
<div class="tooltip">div</div>
<a class="tooltip" href="#">anchor</a><br>
<span class="tooltip">span</span>

CSS

.tooltip {
    margin: 30px;
    display: inline-block;
    border: solid 1px black;
    padding: 5px 10px;
}
.tooltipster-default {
    cursor: pointer;
}
.tooltipster-default:hover {
    text-decoration: underline;
}

JavaScript

$("#btn1").tooltipster({
    content: $('<a href="#" >Visit W3Schools.com</a>'),
    interactive: true,
    onlyOne: true,
 });