Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de información sobre herramientas

Última actualización:

Información sobre herramientas CSS de Tailwind solo CSS con ubicación superior, inferior, izquierda y derecha. Variantes de color, no se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de información sobre herramientas muestran información adicional cuando los usuarios pasan el cursor sobre un elemento o se centran en él. Creadas con atributos HTML semánticos y CSS, la información sobre herramientas mejora la experiencia del usuario al brindar ayuda específica del contexto sin saturar la interfaz. El sistema de información sobre herramientas de Frutjam admite múltiples posiciones, contenido personalizado y animaciones fluidas para un descubrimiento de información fluido.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Nota: la información sobre herramientas se basa en :hover y :focus, que no están disponibles en dispositivos táctiles/móviles. Para diseños orientados a dispositivos móviles, utilice la variante responsiva lg:tooltip para que la información sobre herramientas solo se active en el escritorio (pantallas grandes y superiores). En pantallas más pequeñas, considere utilizar un patrón de divulgación diferente, como un popover o un modal.

Clase Tipo Descripción
tooltipBaseEnvoltorio que revela contenido de data-tip al pasar el cursor/enfocar
tooltip-contentModificadorContenido HTML personalizado dentro de la burbuja de información sobre herramientas
tooltip-topModificadorSe abre encima del gatillo (predeterminado)
tooltip-bottomModificadorSe abre debajo del gatillo.
tooltip-leftModificadorSe abre a la izquierda del gatillo.
tooltip-rightModificadorSe abre a la derecha del gatillo.
tooltip-startModificadorSe abre en el lado de inicio lógico.
tooltip-endModificadorSe abre al lado final lógico.
tooltip-primaryColorBurbuja de color del tema principal
tooltip-secondaryColorBurbuja de color del tema secundario
tooltip-accentColorBurbuja de color del tema de acento
tooltip-neutralColorBurbuja de color de tema neutro
tooltip-infoColorBurbuja de color semántica de información
tooltip-successColorBurbuja de color semántica de éxito
tooltip-warningColorBurbuja de color semántica de advertencia
tooltip-errorColorBurbuja de color semántica de error

Información sobre herramientas

1
2
3
<div class="tooltip" data-tip="Tooltip">
   <button class="btn">Hover me</button>
</div>

1
2
3
<div className="tooltip" data-tip="Tooltip">
   <button className="btn">Hover me</button>
</div>

Contenido de información sobre herramientas personalizado

html 
1
2
3
4
5
6
7
<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>

Información sobre herramientas con icono

html 
1
2
3
4
5
6
<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>

Forzar descripción emergente de apertura

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

Opciones de posicionamiento de información sobre herramientas

Ubicación superior

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

Colocación correcta

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

Colocación final

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

Colocación inferior

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

Colocación izquierda

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

Iniciar colocación

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

Variantes de color de información sobre herramientas

Color primario

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

Color secundario

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

Color de acento

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

Color de información

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

Color del éxito

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

Color de advertencia

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

Color de error

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

Color neutro

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

Información sobre herramientas responsivas

Mostrar solo en pantallas grandes con lg:tooltip

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

Ayudante de JS y React

Utilice createTooltip de frutjam/js o useTooltip de frutjam/react para mostrar u ocultar información sobre herramientas mediante programación, lo que resulta útil para visitas guiadas o texto de ayuda activado.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-4">
  <button class="btn btn-sm" id="tip-show">Show</button>
  <button class="btn btn-sm" id="tip-hide">Hide</button>
  <button class="btn btn-sm" id="tip-toggle">Toggle</button>
</div>
<div class="tooltip" data-tip="Programmatic tooltip" id="js-tooltip">
  <button class="btn">Target</button>
</div>
<script type="module">
  import { createTooltip } from 'frutjam/js'
  const tip = createTooltip(document.getElementById('js-tooltip'))
  document.getElementById('tip-show').onclick = () => tip.show()
  document.getElementById('tip-hide').onclick = () => tip.hide()
  document.getElementById('tip-toggle').onclick = () => tip.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useTooltip } from 'frutjam/react'

export default function TooltipDemo() {
  const tooltip = useTooltip()
  return (
    <>
      <div className="flex gap-2 mb-4">
        <button className="btn btn-sm" onClick={tooltip.show}>Show</button>
        <button className="btn btn-sm" onClick={tooltip.hide}>Hide</button>
        <button className="btn btn-sm" onClick={tooltip.toggle}>Toggle</button>
      </div>
      <div ref={tooltip.ref} className="tooltip" data-tip="Programmatic tooltip">
        <button className="btn">Target</button>
      </div>
    </>
  )
}

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Información sobre herramientas según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP