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

<ttip:default:Estilo por defecto (default)>Estilo basado en las cajas de “navegación espacial” de Opera</ttip>.

<ttip:default:Otro>otra muestra del estilo por defecto</ttip>.

<ttip:winlike:Estilo Windows (''winlike'')>Estilo basado en los tooltips color crema de Windows XP</ttip>.

<ttip:winlike:Estilo Windows (winlike)>Estilo basado en los tooltips color crema de Windows XP</ttip>.

<ttip:winlike:Otro>otra muestra del estilo Windows</ttip>.

{!Palabra:Estilo predefinido para marcar una sola palabra}}.

{!Palabra:Estilo 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 {!algunos:no todos}} ejemplos de como {!utilizar:usar, aprovechar}} este {!plugin:complemento, agregado, extensión}}.

Algunos otros ejemplos:

En este párrafo estamos usando un tooltip <ttip:simple>en realidad, muy simple</ttip> que no tiene ningún <ttip:formato>cosas como subrayados y demases</ttip>, y para el cual hubiera dado lo mismo usar el formato de tooltip {!reducido:es decir, usando una sola palabra}}.

Aquií tenemos un tooltip que viene con <ttip:subrayado>algo bastante más ameno</ttip>, y finalmente un tooltip que <ttip:hereda formato>de su elemento padre, obviamente</ttip>.

1. Ejemplos de un tooltip que corre dentro de una lista.
2. El tooltip va <ttip:aquí>y no tiene información muy interesante</ttip>.
3. Otros ejemplitos.
   • En una sublista con <ttip:algo de sintaxis>como esto, esto y esto…</ttip>.
   • Algo más {!arcaico:palabra 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 <ttip:una sorpresa>mailto:abc@abc123.cl</ttip>.
   • Tooltip corto conteniendo {!formato:cosas como cursiva o negrita}}.
   • O simplemente nada.
4. Y aquí termina la lista.

Aquí también tenemos un ejemplo de un <ttip:vínculo>por ejemplo a la 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.

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. :thumbsup: Notificado en Agosto de 2009, resuelto en la versión 1.8:

• <ttip:default:click me>This is a test.</ttip>
• <ttip:default:click me>This is a test.</ttip>
• <ttip:default:click me>This is a test.</ttip>

indexmenu_n_33