JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<body class="p-4">
  <script id="tooltipTemplate" type="x/template">
     <transition :name="transition">
    <div v-show="show" class="absolute bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md" style="height: auto; min-height: 200%; top: 105%; left: 0%; min-width:220px;" role="alert">
      <div class="flex">
        <div class="py-1"><svg class="fill-current h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
        <div>
          <p class="font-bold">A tooltip!</p>
          <p class="text-sm">Built with Vue.js & Tailwind CSS.</p>
        </div>
      </div>
    </div>
    </transition>
  </script>
  <script id="tooltipButton" type="x/template">
     <div v-on:mouseover="showToolTip=true" v-on:mouseleave="showToolTip=false" class="inline-block relative bg-blue hover:bg-blue-dark text-white font-bold py-4 px-4 rounded-full">
      <slot></slot>
      <Tooltip :transition="transition" :show="showToolTip"></Tooltip>
    </div>   
  </script>
  <div id="app">
    
    <TooltipButton :transition="'bounce'">Bounce</TooltipButton>
    <TooltipButton :transition="'fade'">Fade</TooltipButton>
  </div>
</body>