---
title: "Información sobre herramientas"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Información sobre herramientas CSS de Tailwind solo para CSS con múltiples ubicaciones y variantes de color. Sugerencias de enfoque y desplazamiento accesibles para orientación en la interfaz de usuario; no se requiere JavaScript."
url: https://frutjam.com/es/components/tooltip
---

# Componente de información sobre herramientas

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.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

**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             | Tipo     | 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.