JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>

<span class="ndx-tipsL" data-tip="Hellow World!">Left</span><br><br>
<span class="ndx-tipsT" data-tip="ffff! <br> dgldgd gadg adgdagdag dag ">Top</span><br><br>
<span class="ndx-tipsR" data-tip="cccc!">Right</span><br><br>
<span class="ndx-tipsB" data-tip="cccc!">Bottom</span>

CSS

body{
  text-align: center;
  padding: 50px;
}

span{
  cursor: default;
}

.ndx-tipps-theme {
  background: red;
}

JavaScript

tippy('.ndx-tips', {
  content(f) {
      const tip = f.getAttribute('data-tip');
      return tip;
    },
  zIndex: '999999999999999',
  //interactive: true,
  theme: 'ndx-tipps',
  arrow: false,
  placement: 'left',
});


tippy('.ndx-tipsR', {
  content(f) {
      const tip = f.getAttribute('data-tip');
      return tip;
    },
  zIndex: '999999999999999',
  //interactive: true,
  theme: 'ndx-tipps',
  arrow: false,
  placement: 'right',
});


tippy('.ndx-tipsT', {
  content(f) {
      const tip = f.getAttribute('data-tip');
      return tip;
    },
  zIndex: '999999999999999',
  //interactive: true,
  theme: 'ndx-tipps',
  arrow: false,
  placement: 'top',
});


tippy('.ndx-tipsB', {
  content(f) {
      const tip = f.getAttribute('data-tip');
      return tip;
    },
  zIndex: '999999999999999',
  //interactive: true,
  theme: 'ndx-tipps',
  arrow: false,
  placement: 'bottom',
});