Sadrazam – Tooltip Showcase

Placement Positions

Set the tooltip direction with data-placement. Default is top when the attribute is omitted. The tooltip automatically flips if it would overflow the viewport.

Top (default) Hover me data-placement="top"

Bottom Hover me data-placement="bottom"

Left Hover me data-placement="left"

Right Hover me data-placement="right"

 <!-- Minimal usage: just add data-toggle and title -->

 <span data-toggle="tooltip" title="Hello!">Hover me</span>

 <!-- With explicit placement -->

 <button data-toggle="tooltip" title="Save changes" data-placement="right">Save</button>

Default Placement (No data-placement)

When data-placement is omitted, the tooltip defaults to top. This is the most common usage pattern.

No attribute No data-placement defaults to top

Tooltips on Buttons

Tooltips work on any element. Here they are attached to .bttn components in different sizes and styles.

Primary bttn--pri + tooltip top

Danger bttn--danger + tooltip right

Icon Only Icon buttons + tooltip bottom

Ghost bttn--ghost + tooltip left

Long Text Content

Tooltips support longer text content. The maximum width is constrained to 320px and text wraps via white-space: break-spaces.

Long text Hover for a long tooltip

Short text Hover for a short tooltip

Data Attributes Reference

All configuration is done via HTML attributes. No JavaScript is required beyond calling Tooltip.listen() once on page load.

data-toggle data-toggle="tooltip" Required. Marks the element as a tooltip trigger.

title title="Your text" Required. The text displayed inside the tooltip.

data-placement data-placement="top | right | bottom | left" Optional. Defaults to top.

The title attribute is copied to data-original-title at initialization and the native title is cleared to prevent the browser's default tooltip from showing.

 <!-- Before Tooltip.listen() -->

 <span data-toggle="tooltip" title="Hello">...</span>

 <!-- After Tooltip.listen() processes it -->

 <span data-toggle="tooltip" title="" data-original-title="Hello">...</span>

JavaScript API

The library is exposed as the UMD global Sadrazam. The Tooltip class is available at Sadrazam.Tooltip.

Static: listen() Scans the DOM for all [data-toggle="tooltip"] elements and registers lazy initialization on first hover or touch.

Static: getInstance() Tooltip.getInstance(element) — Returns the Tooltip instance attached to the given element, or undefined.

Static: help() Logs available configuration options to the browser console.

Constructor new Tooltip(element) — Manually creates and attaches a tooltip to a specific DOM element.

.toggle() Programmatically show or hide the tooltip.

.destroy() Fully removes the tooltip: disconnects observer, removes DOM element, unbinds all event listeners, and clears the instance reference.

 // 1. Declarative: Initialize all tooltips on the page

 Sadrazam.Tooltip.listen();

 // 2. Imperative: Attach tooltip to a specific element

 const el = document.querySelector('#my-button');

 new Sadrazam.Tooltip(el);

 // 3. Get an existing instance

 const instance = Sadrazam.Tooltip.getInstance(el);

 instance.toggle();

 // 4. Full cleanup

 instance.destroy();

 // 5. Print help to the console

 Sadrazam.Tooltip.help();

Imperative API Demo

The button below is not declared with data-toggle="tooltip". Instead, its tooltip is attached programmatically via new Sadrazam.Tooltip(el) when you click"Attach Tooltip".

Target Not attached yet

 // Element must have title and data-original-title set

 const target = document.querySelector('#js-api-target');

 new Sadrazam.Tooltip(target);

 // Now hover the element to see the tooltip

Smart Auto-Flip

When a tooltip would overflow the viewport, the positioning engine automatically flips to the opposite side — both horizontally and vertically. Try hovering the elements near the edges of the page. For example, a right tooltip near the right edge flips to left, and a top tooltip near the top edge flips to bottom.

Near right edge data-placement="right" (may flip)

Near left edge data-placement="left" (may flip)

Mobile & Touch Support

Tooltips work on both mouse and touch devices. On touch screens, tapping the trigger element toggles the tooltip. Tapping anywhere outside dismisses it. Emulated mouse events after touch are automatically suppressed to prevent double-firing.

Touch Tap me (touch devices) touchstart toggles tooltip

 // Tooltip.listen() registers both mouseover and touchstart handlers.

 // No additional configuration is needed for touch support.

 Sadrazam.Tooltip.listen();

Lifecycle & Self-Cleanup

Each tooltip instance uses a MutationObserver to monitor the DOM. If the trigger element is removed from the document, the tooltip automatically cleans up its DOM node, event listeners, and observer — preventing memory leaks with no manual teardown required.

Dynamic Element Removable Element

 // When the reference element is removed from the DOM,

 // the tooltip instance self-destructs automatically.

 element.remove(); // tooltip cleans up via MutationObserver

Dark Background

Tooltips render with the same dark background (--color-grey-850--f) regardless of the surrounding context, ensuring consistent readability.

Top Hover me

Buttons

All Four Positions

A quick visual comparison of all four placement values side by side. Hover each to see the tooltip appear in the indicated direction.

Top Right Bottom Left