Copy Pasteable Tooltip

tooltipcopypaste.html

<style>
    .tooltip {
      position: relative;
      display: inline-block;
    }

    .tooltip-content {
      display: none;
      position: absolute;
      top: 120%;
      left: 0;
      background: #222;
      color: white;
      padding: 10px;
      border-radius: 6px;
      width: 250px;
      user-select: text;
    }

    .tooltip-content.active {
      display: block;
    }
</style>

<div class="tooltip">
    <button onclick="toggleTooltip()">Click me</button>
    <div id="tip" class="tooltip-content">
        You can highlight and copy this text safely.
    </div>
</div>

<script>
    function toggleTooltip() {
      document.getElementById("tip").classList.toggle("active");
    }
</script>