Get started with html5tooltipsjs CDN

MIT licensed

HTML5 Tooltips JS: Lightweight library for adding dynamic tooltips.

Tags:
  • tooltips
  • tooltip
  • animation
  • html5
  • 3d
  • ui

Stable version

Copied!

How to start using html5tooltipsjs CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.cdnhub.io/html5tooltipsjs/1.7.3/html5-tooltip.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.cdnhub.io/html5tooltipsjs/1.7.3/html5tooltips.min.js"></script>
</head>
<body>
  <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="This is a tooltip">
    Tooltip
  </button>

  <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="This is a tooltip on the left">
    Tooltip on left
  </button>

  <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="right" title="This is a tooltip on the right">
    Tooltip on right
  </button>

  <script>
    // Initialize tooltips with Bootstrap
    document.addEventListener('DOMContentLoaded', function() {
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      })
    })
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions