HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SVG Interactivity — hover tooltip</title>
</head>
<body>
  <h1>SVG interactivity — hover + tooltip</h1>
  <svg width="320" height="160" viewBox="0 0 320 160">
    <style>
      .chip{cursor:pointer;transition:transform 140ms ease,opacity 140ms ease}
      .chip:hover{transform:translateY(-2px);opacity:0.95}
      .chip.is-focus rect{stroke:#0f172a;stroke-width:3}
    </style>
    <g id="chipA" class="chip" tabindex="0" role="button" aria-label="Blue chip">
      <rect x="32" y="44" width="120" height="72" rx="18" fill="#3b82f6" />
      <text x="92" y="86" text-anchor="middle" font-size="14" fill="white"
            font-family="system-ui,Segoe UI,Arial" pointer-events="none">Blue</text>
    </g>
    <g id="chipB" class="chip" tabindex="0" role="button" aria-label="Green chip">
      <rect x="168" y="44" width="120" height="72" rx="18" fill="#10b981" />
      <text x="228" y="86" text-anchor="middle" font-size="14" fill="white"
            font-family="system-ui,Segoe UI,Arial" pointer-events="none">Green</text>
    </g>
  </svg>
  <div id="tip">Hover or focus a chip</div>
  <script>
    var tip = document.getElementById("tip");
    function bindChip(id, msg) {
      var el = document.getElementById(id);
      function show() { tip.textContent = msg; }
      el.addEventListener("mouseover", show);
      el.addEventListener("focus", function () { el.classList.add("is-focus"); show(); });
      el.addEventListener("blur", function () { el.classList.remove("is-focus"); });
    }
    bindChip("chipA", "Blue chip selected (demo)");
    bindChip("chipB", "Green chip selected (demo)");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Interactivity — hover tooltip (Try It)