JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tippy Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/material.css" />
    <style>
      .test {
        margin: 60px;
      }
    
      .tippy-box[data-theme~='my-theme'] {
        background-color: #73AD21;
        color: #FFFFFF;
        border: 1px solid green;
        padding: 15px;
        font-size: 20px;
      }

      .tippy-box[data-theme~='my-theme'][data-placement^='top']>.tippy-arrow::before {
        border-top-color: #73AD21;
      }
      .tippy-box[data-theme~='my-theme'][data-placement^='bottom']>.tippy-arrow::before {
        border-bottom-color: #73AD21;
      }
      .tippy-box[data-theme~='my-theme'][data-placement^='left']>.tippy-arrow::before {
        border-left-color: #73AD21;
      }
      .tippy-box[data-theme~='my-theme'][data-placement^='right']>.tippy-arrow::before {
        border-right-color: #73AD21;
      }

    </style>
  </head>

  <body>
    <div class="container">
      <h1>Tippy</h1>
      <h2>Tooltip CSS Example</h2>
      <ul class="list-inline">
        <li><a class="test" href="#" data-tippy-content="Hooray!" data-tippy-placement="left">Left</a></li>
        <li><a class="test" href="#" data-tippy-content="Hooray!" data-tippy-placement="bottom">Bottom</a></li>
        <li><a class="test" href="#" data-tippy-content="Hooray!" data-tippy-placement="top">Top</a></li>
        <li><a class="test" href="#" data-tippy-content="Hooray!" data-tippy-placement="right">Right</a></li>
      </ul>
    </div>
    <script>
      const tooltips = tippy('[data-tippy-content]', {
  ...