JSFiddle - React, Tailwind, and code Playground

HTML

<xen:require css="mym_bbcode_tooltip.css" />
<div title="{xen:raw $options.1}" id="mym_bbcode_tooltip.css">
<label style="cursor:help">{xen:raw $content}</label>
</div>

CSS

a.mym_bbcode_tooltip {
   font-weight: bold;
   position: relative;
   text-decoration: none;
   cursor: help;
}

a.mym_bbcode_tooltip span {
   position: absolute;
   font-weight: normal;
   border: 1px solid black;
   background-color: #CFE1F6;
   padding: 10px;      
   color: black;
   width: 225px;

   left: -9999em;
}

a.mym_bbcode_tooltip :hover {
   visibility: visible;
   z-index: 100;
}

a.mym_bbcode_tooltip :hover span, a.tooltip:focus span {
   left: 30px;
   text-decoration: none;
}