JSFiddle - React, Tailwind, and code Playground

by Jeremy Bolanos

HTML

<input type="checkbox" title="This is a test">

CSS

body { margin: 40px; }
.ui-tooltip {
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-radius: 4px;
    padding: 0;
    opacity: 1;
    border: none;
    box-shadow: none;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
    border: 1px solid #cecece;
    border-radius: 8px;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    border-color: transparent rgb(255, 255, 255);
    border-width: 10px 10px 10px 0;
}

JavaScript

var position = {
    my: 'left center',
    at: 'right+10 center'
};
position.collision = 'none';
$('input[type="checkbox"]').tooltip();
$('input[value="right"]').trigger('change');
$('input[type="checkbox"]').tooltip('option', 'position', position);
$('input[type="checkbox"]').tooltip('option', 'tooltipClass', 'right');