JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<link rel="stylesheet" href="http://blu-rays.pk/web/temptest/tooltipster.css">
<script src="http://blu-rays.pk/web/temptest/jquery.tooltipster.min.js"></script>
<div class="tooltip" title="This is my div's tooltip message!">
    <p>This div has a tooltip when you hover over it!</p>
</div>

CSS

.my-custom-theme {
    border-radius: 5px;
    border: 2px solid #ef7f25;
    background: #fff;
    color: #fff;
}
/* Use this next selector to style things like font-size and line-height: */
 .my-custom-theme .tooltipster-content {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 10px;
    color: #ef7f25;
}

JavaScript

$(document).ready(function () {
    $('.tooltip').tooltipster({
        animation: 'grow',
        theme: '.my-custom-theme'
    });
});