Requires David UI JS

Tailwind CSS Tooltip

David UI's Tooltip component offers an intuitive way to display contextual hints or information. Styled with Tailwind CSS, it supports customizable triggers, smooth animations, and flexible layouts for an enhanced user experience.

Explore our responsive Tooltip component examples, styled with Tailwind CSS, perfect for improving usability in your web or mobile projects.

---

#Basic Tooltip

A simple Tooltip component that appears when hovering over a button. This example demonstrates how to use tooltips for providing quick, context-sensitive information without cluttering the interface.

---

#Tooltip Placement

Showcases the flexibility of the Tooltip component with various placement options, including top, right, bottom, and left. These placements ensure the tooltip adapts seamlessly to different layouts and user interactions.

---

#Tooltip with Helper Icon

A Tooltip example featuring a helper icon that triggers the tooltip. Perfect for displaying additional information or guidance in a clean and intuitive way, such as explaining form fields or settings.

---

#Tooltip Custom Styles

An example of a Tooltip with custom styles, including borders, background colors, and typography. This demonstrates how to customize tooltips to align with your application's design system or branding.

---

#Required Script

The Tooltip component in david-ai requires JavaScript to handle the tooltip functionality and positioning. The library provides smooth transitions and hover behavior through data attributes, powered by Popper.js for accurate positioning.

#Installation

To use the Tooltip component in your project, you first need to install the david-ai library via npm:

#Basic Usage

#Using with Global Access

If you prefer, you can use the DavidAI global object instead of directly importing initTooltips:

#Using with CDN

You can include david-ai via a CDN and initialize tooltip functionality globally in the browser. Add the following script to your HTML file:

#HTML Code Example

---

#TypeScript

David AI Tooltip component can be used programmatically with TypeScript support for more control and type safety:

#Programmatic Usage with TypeScript

Learn how to use David AI's Tooltip component with TypeScript for enhanced tooltip control. This component provides programmatic methods to show/hide tooltips, customize content and placement, and configure tooltip behavior with full type safety and customization options.

#HTML Structure

The HTML structure demonstrates an accessible and interactive tooltip component featuring:

• Trigger element that shows/hides tooltip on hover/click
• Customizable tooltip content and placement
• ARIA attributes for accessibility support
• Dynamic positioning that follows trigger element
• Smooth show/hide transitions
• Dark and light theme compatibility with Tailwind CSS
• Responsive design that adapts to screen edges
• Data attributes for configuration
• Customizable styling through Tailwind classes
• Programmatic control through JavaScript methods

Here's the complete HTML implementation:

---

#Props & Methods

The Tooltip component provides a way to display contextual information when users hover over or interact with an element. It supports customizable positioning, styling, and programmatic control through methods to show and hide the tooltip.