JSFiddle - React, Tailwind, and code Playground

by desytec

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
<table border="1">
  <tr>
    <td><a href="#" class="row-btn tooltip_commands">click!</a></td>
  </tr>
  <tr>
    <td><a href="#" class="row-btn tooltip_commands">click!</a></td>
  </tr>
  <tr>
    <td><a href="#" class="row-btn tooltip_commands">click!</a></td>
  </tr>
</table>

<div class="tooltip_templates">
    <div id="tooltip_content">
        <ul class="list-group">
            <li class="list-group-item">
                <a id="_bajarFactura" href="#" title="Bajar factura">Bajar factura original</a>
            </li>
            <li class="list-group-item">
                <a id="_verFactura" data-toggle="modal" href="#myModal" title="Ver archivo de la factura">Ver factura original</a>
            </li>
            <li class="list-group-item">
                <a id="_verDetalle" href="#" title="Ver detalles de la factura">Ver Detalle</a>
            </li>
            <li class="list-group-item">
                <a id="_reEnviar" href="#" title="Re-enviar factura a un e-mail">Re-enviar</a>
            </li>
        </ul>
    </div>
</div>

CSS

.tooltip_templates {
    display: none;
}

/* If `animateFill: true` (default) */
.tippy-tooltip.honeybee-theme .tippy-backdrop {
  background-color: yellow;
  font-weight: bold;
  color: #333;
}

/* If `animateFill: false` */
.tippy-tooltip.honeybee-theme {
  background-color: yellow;
  border: 2px solid orange;
  font-weight: bold;
  color: #333;
}

JavaScript

$(document).ready(function () {
	tippy('.tooltip_commands', {
                        delay: 100,
                        arrow: true,
                        arrowType: 'round',
                        size: 'large',
                        duration: 500,
                        animation: 'scale',
                        placement: 'left',
                        interactive: true,
                        trigger: 'click',
                        theme: 'honeybee',
                        content: document.querySelector('#tooltip_content').cloneNode(true)
                    });
});