Core Code
Core Code Modern Dev Handbook

Tooltip on Link

Attach tooltips to links for additional context.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<a href="#" data-bs-toggle="tooltip" title="Visit documentation">
Documentation Link
</a>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.querySelectorAll("[data-bs-toggle='tooltip']").forEach(function(el){
new bootstrap.Tooltip(el)
})
</script>

</body>
</html>

More BS5 Tooltip Examples (7)

example Basic Tooltip open example example Tooltip Positions open example example HTML Tooltip Content open example example Tooltip on Disabled Button open example example Tooltip on Icon open example example Tooltip Trigger Modes open example example Tooltip Help in Forms open example