tooltip (tooltips basados en CSS) es mi segundo plugin en desarrollo para la plataforma Dokuwiki. Este plugin introduce la característica de asignar “tooltips” o cuadros informativos, a secciones de texto, de manera similar a como funciona la etiqueta HTML abbr
.
El plugin incorpora dos modos de sintaxis: uno para marcar texto y contenidos en general con un tooltip, y otro, más simple, que marca una sola palabra con un tooltip, ideal para acrónimos y definiciones.
Para marcar una sección de texto con un tooltip, usa la siguiente sintaxis:
<ttip:text> tooltip_text </ttip> # text : text normally shown # tooltip_text : the contents of the tooltip box <ttip:stye1:text> tooltip text </ttip> # style1 : style name, check Styles
Puedes usar style1
para escoger otro estilo, chequea la sección de Estilos más abajo.
Para marcar solamente una palabra con un tooltip, usa la siguiente sintaxis:
{!word:tooltip_text}} # 'word' MUST be one word
Parámetro | Estructura | Efecto |
---|---|---|
style | [a-zA-Z0-9\_-]+ | Estilo CSS utilizado para renderizar el tooltip. Ver la sección Estilos. |
text | text | Texto cabecera al que se le pondrá el aviso. |
tooltip_text | text | Texto contenido en la cabecera. |
word | \w+ | Una sola palabra, utilizada como cabecera en el aviso. |
El archivo style.css
contiene los ejemplos de estilos. El plugin puede aceptar otros estilos CSS (el estilo por defecto es default
). Para agregarlos, solamente copia el contenido del archivo dentro de /conf/userstyle.css
, y edita el estilo a tu conveniencia.
Una vez editado debes cambiar el nombre de modo que siga el patrón tooltip_nombre
, y para invocar el plugin con este estilo se cambia el parámetro en la sintaxis:
<ttip:nombre:...> ..... </ttip>
El estilo inline
está reservado para la notación corta ({!word:tooltip}}
) y es aplicado automáticamente.
Estilos incluidos:
<ttip:default:Estilo por defecto (''default'')>Estilo basado en las cajas de "navegación espacial" de Opera</ttip>.
Estilo por defecto (''default'')Estilo basado en las cajas de “navegación espacial” de Opera .
Otrootra muestra del estilo por defecto .
<ttip:winlike:Estilo Windows (''winlike'')>Estilo basado en los tooltips color crema de Windows XP</ttip>.
Estilo Windows (''winlike'')Estilo basado en los tooltips color crema de Windows XP .
Otrootra muestra del estilo Windows .
{!Palabra:Estilo predefinido para marcar una sola palabra}}.
PalabraEstilo predefinido para marcar una sola palabra .
Solamente copia una de las secciones de estilos o la plantilla de estilo a tu archivo conf/userstyle.css
y sustituye el nombre (“default”) por un nombre de estilo propio. A continuación limpia la caché de tu instalación. Podrás invocar tu nuevo estilo, por ejemplo “miestilo” con la siguiente sintaxis:
<ttip:miestilo:Texto> Contenido del Tooltip</ttip>
Plantilla de Estilo
/** * A style sheet that can be modified to create your own Tooltip Plugin style. * Change the name particle (_NAME) as you see appropiate and follow the instructions. * Substitute in your conf/userstyle.css file. */ div.dokuwiki span.tooltip_NAME { display: inline-block; position: relative; /* other styles: border, padding, color */ } div.dokuwiki span.tooltip_default .tip { display: none; /* DO NOT MODIFY */ } div.dokuwiki span.tooltip_default:hover { z-index: 998; } div.dokuwiki span.tooltip_default:hover .tip { display: block; position: absolute; top: 100%; left: 5px; z-index: 999; /* other styles: box size, layout, border, font style, color, etc... */ }
Ejemplo básico de tooltip:
Marcar con Tooltip | Este pedazo de texto: ⇒ no tiene nada de particulara menos que se mire muy de cerca . Si lo tuviera (que no digo que lo tenga), y quisiera hacerlo evidente (que no digo que lo quiera), no lo marcaría con un tooltip (que no digo que lo haga), sino que lo haría realmentedigamos, usando una marquesina colgante de neón y fuegos pirotécnicos destacable. |
---|
Este pedazo de texto: => <ttip:no tiene nada de particular>a menos que se mire //muy// de cerca< /ttip>. Si lo tuviera (//que no digo que lo tenga//), y quisiera hacerlo evidente (//que no digo que lo quiera//), no lo marcaría con un tooltip (//que no digo que lo haga//), sino que lo haría {!realmente:digamos, usando una marquesina colgante de __neón__ y fuegos pirotécnicos}} destacable.
Marcar con Tooltip | Tooltip que marca unano pueden ser más sola palabra del texto. |
---|
Tooltip que marca {!una:no pueden ser más}} sola palabra del texto.
Esos son solamente algunosno todos ejemplos de como utilizarusar, aprovechar este plugincomplemento, agregado, extensión .
Algunos otros ejemplos:
En este párrafo estamos usando un tooltip simpleen realidad, muy simple que no tiene ningún formatocosas como subrayados y demases , y para el cual hubiera dado lo mismo usar el formato de tooltip reducidoes decir, usando una sola palabra .
Aquií tenemos un tooltip que viene con subrayadoalgo bastante más ameno , y finalmente un tooltip que hereda formatode su elemento padre, obviamente .
esto
…
.
Aquí también tenemos un ejemplo de un vínculopor ejemplo a la Wikipedia
dentro de un tooltip, marcado de caracteres especialescosas como guiones‑que‑no‑cortan‑palabras sin‑importar cuán‑largo‑sea‑el‑texto
, y un ejemplo sencillo de un tletra T,
minúscula
ooltip demasiado corto.
Aquí también tenemos un ejemplo de un <ttip:vínculo>por ejemplo a la [[http://wikipedia.org|Wikipedia]]</ttip> dentro de un tooltip, marcado de <ttip:caracteres especiales>cosas como guiones‑que‑no‑cortan‑palabras sin‑importar‑cuán‑largo‑sea‑el‑texto</ttip>, y un ejemplo sencillo de un <ttip:t>letra T,\\ minúscula</ttip>ooltip demasiado corto.
Posible bug en listas: al usar tooltip en listas u otras estructuras complejas, el popup se vuelve transparente y el texto ilegible. Aparentemente se debió a un error al implementar z-order
. Notificado en Agosto de 2009, resuelto en la versión 1.8: