Loading...

Tooltip

Tooltip Directions

Tooltip example are available with follwing options, Directions are mirrored when using Bootstrap in RTL.

Tooltip with HTML

When you hover over the button labeled "Tooltip with HTML," a tooltip will appear displaying formatted text. The tooltip's content includes HTML elements such as italic, underlined, and bold text. The `data-bs-html="true"` attribute allows the tooltip to render HTML tags correctly.

Tooltips on links

This is sample text intended to showcase some inline links with tooltips. Currently, it serves as placeholder content—essentially filler—meant to illustrate how real text might be represented. By viewing this example, you should get a clear idea of how tooltips on links function in practice. This will help you understand how they can be effectively used on your own site or project.

Colored Tooltips

Use the data-bs-custom-class="tooltip-*" attribute to apply a custom tooltip style with a primary color theme. This allows you to customize the appearance of the tooltip, giving it a distinct look that matches the primary color scheme of your application.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.