Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

Examples

Basic

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text . And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

Astro file

---
import { Tooltip } from 'astro-bootstrap';
---

<p class="muted">
  Placeholder text to demonstrate some <Tooltip title="Default tooltip">
    <a href="#">inline links</a>
  </Tooltip> with tooltips. This is now just filler, no killer. Content placed here
  just to mimic the presence of <Tooltip title="Another tooltip">
    <a href="#">real text</a>
  </Tooltip>. And all that just to give you an idea of how tooltips would look
  when used in real-world situations. So hopefully you've now seen how <Tooltip
    title="Another one here too"
  >
    <a href="#">these tooltips on links</a>
  </Tooltip> can work in practice, once you use them on your own site or project.
</p>

No components

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

Astro file

---
// Template example only
---

<p class="muted">
  Placeholder text to demonstrate some <a
    href="#"
    data-bs-toggle="tooltip"
    data-bs-title="Default tooltip">inline links</a
  > with tooltips. This is now just filler, no killer. Content placed here just to
  mimic the presence of <a
    href="#"
    data-bs-toggle="tooltip"
    data-bs-title="Another tooltip">real text</a
  >. And all that just to give you an idea of how tooltips would look when used
  in real-world situations. So hopefully you've now seen how <a
    href="#"
    data-bs-toggle="tooltip"
    data-bs-title="Another one here too">these tooltips on links</a
  > can work in practice, once you use them on <a
    href="#"
    data-bs-toggle="tooltip"
    data-bs-title="The last tip!">your own</a
  > site or project.
</p>

<script>
  import Tooltip from 'bootstrap/js/dist/tooltip';
  const tooltipTriggerList = document.querySelectorAll(
    '[data-bs-toggle="tooltip"]',
  );
  /* eslint-disable-next-line  no-unused-vars*/ // only required if using es-lint
  const tooltipList = [...tooltipTriggerList].map(
    (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl),
  );
</script>

API

import { Tooltip } from 'astro-bootstrap'

Name	Type	Default	Description
title ^required	string		Tooltip title
Placement	string	`top`	Tooltip position - top, bottom, left or right
Animation	boolean	`true`	Disable/Enable animation
Delay	number		Delay in ms to show tooltip
html	boolean	`false`	Enable html in tooltip
Trigger	string		Mouse event which triggers tooltip. click, hover, focus or a combination separated by spaces.
customClass	string		Add a css class to the tooltip