LuchoWiki

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

• Los dos puntos en <ttip:...> son obligatorios.

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:

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.   

 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 .

1. Ejemplos de un tooltip que corre dentro de una lista.
2. El tooltip va aquíy no tiene información muy interesante .
3. Otros ejemplitos.
   • En una sublista con algo de sintaxiscomo esto, esto y esto… .
   • Algo más arcaicopalabra que se utiliza cuando se quiere dar a entender que se está refiriendo a algo particularmente rudimentario pero que aún así permite hacer cosas interesantes.
   • Tooltip conteniendo una sorpresamailto:abc@abc123.cl .
   • Tooltip corto conteniendo formatocosas como cursiva o negrita .
   • O simplemente nada.
4. Y aquí termina la lista.

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:

• click meThis is a test.
• click meThis is a test.
• click meThis is a test.