Tooltip
Pista textual posicionada (top/bottom). Se ancla al elemento padre con posición absoluta. Para tooltips CSS-puros sobre cualquier elemento usa el atributo data-tip.
Copy
<div style="position:relative;display:inline-block;padding:24px 60px">
<span style="background:var(--bg-3);padding:8px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line)">Botón anclaje</span>
<span class="tooltip top">Atajo: F2</span>
</div>
Copy
{% from "tooltip.jinja" import tooltip %}
<div style="position:relative;display:inline-block;padding:24px 60px">
<span style="background:var(--bg-3);padding:8px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line)">Botón anclaje</span>
{{ tooltip("Atajo: F2", placement="top") }}
</div>
Copy
<div style="position:relative;display:inline-block;padding:24px 60px">
<span style="background:var(--bg-3);padding:8px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line)">Botón anclaje</span>
<Tooltip label="Atajo: F2" placement="top" />
</div>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Otro anclaje
Última edición: hoy
Copy
<div style="position:relative;display:inline-block;padding:24px 60px">
<span style="background:var(--bg-3);padding:8px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line)">Otro anclaje</span>
<span class="tooltip bottom">Última edición: hoy</span>
</div>
Copy
{% from "tooltip.jinja" import tooltip %}
<div style="position:relative;display:inline-block;padding:24px 60px">
<span style="background:var(--bg-3);padding:8px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line)">Otro anclaje</span>
{{ tooltip("Última edición: hoy", placement="bottom") }}
</div>
Copy
<div style="position:relative;display:inline-block;padding:24px 60px">
<span style="background:var(--bg-3);padding:8px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line)">Otro anclaje</span>
<Tooltip label="Última edición: hoy" placement="bottom" />
</div>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Copy
<button class="btn ghost" data-tip="Filtrar">Filtrar</button>
<button class="btn ghost" data-tip="Exportar CSV">Exportar</button>
<button class="btn secondary" data-tip="Atajo: ⌘ + S">Guardar</button>
Copy
<button class="btn ghost" data-tip="Filtrar">Filtrar</button>
<button class="btn ghost" data-tip="Exportar CSV">Exportar</button>
<button class="btn secondary" data-tip="Atajo: ⌘ + S">Guardar</button>
Copy
<button class="btn ghost" data-tip="Filtrar">Filtrar</button>
<button class="btn ghost" data-tip="Exportar CSV">Exportar</button>
<button class="btn secondary" data-tip="Atajo: ⌘ + S">Guardar</button>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
API
Prop Tipo Default Descripción
labelstr — Texto del tooltip. placement"top"|"bottom" "top" Posición respecto al elemento. attrsdict {} Atributos HTML extra (e.g. style con left/top).