Interactivity

Tooltips and popovers

Add automatically positioned supplemental labels and click-triggered contextual content with accessible state.

Interactivity guideKeyboard readyv0.7.0 current

Interactivity

Floating feedback

Both controllers position against their trigger and keep the panel inside the viewport. Tooltips supplement an existing accessible name; popovers disclose richer contextual content.

HTML · Tooltip

<button class="bs-btn bs-btn-secondary" type="button" data-bs-tooltip="Copies a shareable link" data-bs-placement="top">
  Copy link
</button>

HTML · Popover

<button class="bs-btn bs-btn-primary" type="button" data-bs-popover="Changes are saved for 30 days." data-bs-title="Draft retention" data-bs-placement="bottom">
  Retention details
</button>

JavaScript · Direct initialization

import { initTooltips } from "@boobstrap/boobstrap/js/tooltip";
import { initPopovers } from "@boobstrap/boobstrap/js/popover";

const tooltips = initTooltips(document);
const popovers = initPopovers(document);

React

useTooltip and usePopover hooks keep the floating panel in your JSX. Prop getters connect IDs, visibility, placement, hover/focus or click behavior, Escape dismissal, outside-pointer dismissal, scroll dismissal, refs, and repositioning.

JSX · React tooltip and popover

import { usePopover, useTooltip } from "@boobstrap/react";

export function ContextHelp() {
  const tooltip = useTooltip({ id: "copy-tip", placement: "top" });
  const popover = usePopover({ id: "retention-popover", placement: "bottom" });

  return (
    <>
      <button className="bs-btn bs-btn-secondary" {...tooltip.getTriggerProps()}>Copy link</button>
      <div className="bs-tooltip" {...tooltip.getTooltipProps()}>Copies a shareable URL</div>

      <button className="bs-btn bs-btn-primary" {...popover.getTriggerProps()}>Retention details</button>
      <div className="bs-popover" aria-labelledby="retention-title"
        {...popover.getPopoverProps()}>
        <strong className="bs-popover-header" id="retention-title">Retention</strong>
        <div className="bs-popover-body">Logs are retained for 30 days.</div>
      </div>
    </>
  );
}

Vue

Vue composables expose the same consumer-owned panels as reactive prop objects. Bind each getter to the exact trigger or panel it describes.

Vue · Tooltip and popover composables

<script setup>
import { usePopover, useTooltip } from "@boobstrap/vue";

const tooltip = useTooltip({ id: "copy-tip", placement: "top" });
const popover = usePopover({ id: "retention-popover", placement: "bottom" });
</script>

<template>
  <button class="bs-btn bs-btn-secondary" v-bind="tooltip.getTriggerProps()">Copy link</button>
  <div class="bs-tooltip" v-bind="tooltip.getTooltipProps()">
    Copies a shareable URL
  </div>

  <button class="bs-btn bs-btn-primary" v-bind="popover.getTriggerProps()">Retention details</button>
  <div class="bs-popover" aria-labelledby="retention-title"
    v-bind="popover.getPopoverProps()">
    <strong class="bs-popover-header" id="retention-title">Retention</strong>
    <div class="bs-popover-body">Logs are retained for 30 days.</div>
  </div>
</template>

Role

Tooltips supplement accessible names; popovers disclose interactive content or rich descriptions.

Placement

Floating panels automatically adjust placement to remain in the viewport.

Dismissal

Escape, scrolling, and clicking outside dismiss floating panels safely.

Tooltips and Popovers API

Class	Purpose
`.bs-tooltip`	Floating contextual label for supplemental hint text.
`.bs-popover`	Floating card container for rich contextual content.
`.bs-popover-header`	Prominent header or title within a popover.
`.bs-popover-body`	Main descriptive content body within a popover.
`.bs-floating-arrow`	Positioned pointer arrow anchored between trigger and panel.