---
title: "Tooltip"
type: component
version: "2.1.2"
doc_version: "2.3.0"
status: stable
date: 2026-03-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Tooltip with multiple placements and color variants. Accessible hover and focus hints for UI guidance—no JavaScript required."
url: https://frutjam.com/components/tooltip
---

# Tooltip Component

 Tooltip components display additional information when users hover over or focus on an element. Built with semantic HTML attributes and CSS, tooltips enhance user experience by providing context-specific help without cluttering the interface. The Frutjam tooltip system supports multiple positions, custom content, and smooth animations for seamless information discovery.

**Note:** Tooltips rely on `:hover` and `:focus`, which are **not available on touch/mobile devices**. For mobile-first layouts, use the responsive variant `lg:tooltip` so the tooltip only activates on desktop (large screens and above). On smaller screens, consider using a different disclosure pattern such as a [popover](https://frutjam.com/components/popover) or [modal](https://frutjam.com/components/modal).

| Class             | Type     | Description                                            |
| ----------------- | -------- | ------------------------------------------------------ |
| tooltip           | Base     | Wrapper that reveals `data-tip` content on hover/focus |
| tooltip-content   | Modifier | Custom HTML content inside the tooltip bubble          |
| tooltip-top       | Modifier | Opens above the trigger (default)                      |
| tooltip-bottom    | Modifier | Opens below the trigger                                |
| tooltip-left      | Modifier | Opens to the left of the trigger                       |
| tooltip-right     | Modifier | Opens to the right of the trigger                      |
| tooltip-start     | Modifier | Opens to the logical start side                        |
| tooltip-end       | Modifier | Opens to the logical end side                          |
| tooltip-primary   | Color    | Primary theme color bubble                             |
| tooltip-secondary | Color    | Secondary theme color bubble                           |
| tooltip-accent    | Color    | Accent theme color bubble                              |
| tooltip-neutral   | Color    | Neutral theme color bubble                             |
| tooltip-info      | Color    | Info semantic color bubble                             |
| tooltip-success   | Color    | Success semantic color bubble                          |
| tooltip-warning   | Color    | Warning semantic color bubble                          |
| tooltip-error     | Color    | Error semantic color bubble                            |

## Tooltip

## Custom Tooltip Content

```html
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>
```


## Tooltip with Icon

```html
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>
```


## Force Open Tooltip

```html
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>
```


## Tooltip Positioning Options

### Top Placement

```html
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>
```


### Right Placement

```html
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>
```


### End Placement

```html
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>
```


### Bottom Placement

```html
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>
```


### Left Placement

```html
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>
```


### Start Placement

```html
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>
```


## Tooltip Color Variants

### Primary Color

```html
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>
```


### Secondary Color

```html
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>
```


### Accent Color

```html
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>
```


### Info Color

```html
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>
```


### Success Color

```html
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>
```


### Warning Color

```html
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>
```


### Error Color

```html
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>
```


### Neutral Color

```html
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>
```


## Responsive Tooltips

Show only on large screens with `lg:tooltip`

```html
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>
```


## JS & React Helper

Use `createTooltip` from `frutjam/js` or `useTooltip` from `frutjam/react` to show or hide a tooltip programmatically — useful for guided tours or triggered help text.