Interactive · Beginner

Tooltips with Tippy.js

Polished, positioned tooltips with hover and click triggers, powered by Tippy.js and Popper.

Requires Tippy.js. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<script src="https://unpkg.com/@popperjs/core@2"></script>

<script src="https://unpkg.com/tippy.js@6"></script>

<div class="tip-row">
  <button class="tip-b" data-tippy-content="I'm a clean, positioned tooltip ✨">Hover me</button>
  <button class="tip-b" data-tippy-content="Tooltips can go anywhere" data-tippy-placement="bottom">Bottom</button>
  <button class="tip-b" id="clickTip">Click tooltip</button>
</div>

body{background:#f6f7fa}
.tip-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tip-b{font:600 14px/1 system-ui,sans-serif;color:#1a1f36;background:#fff;border:1px solid #d8dce6;border-radius:10px;padding:12px 20px;cursor:pointer}
.tip-b:hover{border-color:#5b6cff}

tippy('[data-tippy-content]',{animation:'scale',theme:'light'});
tippy('#clickTip',{content:'Triggered on click!',trigger:'click',animation:'scale'});

Free to use.This component uses Tippy.js (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.