JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/spiketip.min.css">
<button spiketip-title="Whats up!" spiketip-pos="top">Hover me! (top)</button>
<button spiketip-title="Whats up!" spiketip-pos="left">Hover me! (left)</button>
<button spiketip-title="Whats up!" spiketip-pos="right">Hover me! (right)</button>
<button spiketip-title="Whats up!" spiketip-pos="bottom">Hover me! (bottom)</button>

<br/><br/><br/>
<button spiketip-title="Whats up!" spiketip-pos="top-left">Hover me! (top-left)</button>
<button spiketip-title="Whats up!" spiketip-pos="top-right">Hover me! (top-right)</button>
<button spiketip-title="Whats up!" spiketip-pos="bottom-left">Hover me! (bottom-left)</button>
<button spiketip-title="Whats up!" spiketip-pos="bottom-right">Hover me! (bottom-right)</button>

<br/><br/><br/>
<button spiketip-title="Whats up!" spiketip-pos="top" spiketip-color="success">Hover me! (color-success)</button>
<button spiketip-title="Whats up!" spiketip-pos="top" spiketip-color="error">Hover me! (color-error)</button>
<button spiketip-title="Whats up!" spiketip-pos="bottom" spiketip-color="warning">Hover me! (color-warning)</button>
<button spiketip-title="Whats up!" spiketip-pos="bottom" spiketip-color="info">Hover me! (color-info)</button>


<br/><br/><br/>
<button spiketip-title="Whats up!" spiketip-pos="top" spiketip-length="sm">Hover me! (length-sm)</button>
<button spiketip-title="Space, the final frontier." spiketip-pos="top" spiketip-length="md">Hover me! (length-md)</button>
<button spiketip-title="These are the voyages of the starship Enterprise." spiketip-pos="bottom" spiketip-length="lg">Hover me! (length-lg)</button>
<button spiketip-title="Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!" spiketip-pos="top" spiketip-length="xl">Hover me! (length-xl)</button>
<button spiketip-title="Doc Bruce Banner, pelted by gamma rays, turned into...

CSS

body {
  padding-top: 50px;
  padding-left: 50px;
}

button {
  background-color: orange;
  height: 35px;
  width: 200px;
  margin-bottom: 30px;
  margin-right: 15px;
  color: white;
}