Diferencias

Muestra las diferencias entre dos versiones de la página.


desarrollo:dokuwiki:plugin-tooltip [2012/05/26 10:53] (actual) – creado - editor externo 127.0.0.1
Línea 1: Línea 1:
 +===== plugin:tooltip =====
 +<note dl>
 +
 +  * [b]Tooltip[/b]: permite marcar texto con tooltips.
 +  * {{:desarrollo:dokuwiki:dw-plugin-tooltip-latest.zip|Descarga}} Versión ''1.8'', ''2009-10-03''
 +  * **DokuWiki**: [[doku>plugin:tooltip]]
 +</note>
 +
 +==== Resumen ====
 +
 +**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.
 +
 +==== Uso ====
 +
 +Para marcar una sección de texto con un __tooltip__, usa la siguiente sintaxis:
 +
 +<code>
 +<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
 +</code>
 +
 +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:
 +
 +<code>
 +{!word:tooltip_text}}         # 'word' MUST be one word
 +</code>
 +
 +===Detalles===
 +
 +  * Los dos puntos en <nowiki><ttip:...></nowiki> son __obligatorios__.
 +
 +=== Parametros ===
 +
 +^ __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.  |
 +
 +=== Estilos ===
 +
 +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: 
 +
 +<code>
 +<ttip:nombre:...> ..... </ttip>
 +</code>
 +
 +El estilo ''inline'' está reservado para la notación corta (''<nowiki>{!word:tooltip}}</nowiki>'') y es aplicado automáticamente.
 +
 +**Estilos incluidos**:
 +
 +<code><ttip:default:Estilo por defecto (''default'')>Estilo basado en las cajas de "navegación espacial" de Opera</ttip>.</code>
 +
 +<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>.
 +
 +<code><ttip:winlike:Estilo Windows (''winlike'')>Estilo basado en los tooltips color crema de Windows XP</ttip>.</code>
 +
 +<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>.
 +
 +<code>{!Palabra:Estilo predefinido para marcar una sola palabra}}.</code>
 +
 +{!Palabra:Estilo predefinido para marcar una sola palabra}}.
 +
 +=== Creando tu Estilo Personalizado ===
 +
 +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:
 +<code><ttip:miestilo:Texto> Contenido del Tooltip</ttip></code>
 +
 +**Plantilla de Estilo**
 +<code css>
 +/**
 +  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... */
 +  }
 +</code>
 +
 +===== Demo =====
 +
 +Ejemplo básico de tooltip:
 +
 +^ Marcar con 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.  |
 +
 +<code>
 +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.   
 +</code>
 +
 +^ Marcar con Tooltip   | Tooltip que marca {!una:no pueden ser más}} sola palabra del texto.  |
 +
 +<code>
 + Tooltip que marca {!una:no pueden ser más}} sola palabra del texto.
 +
 +</code>
 +
 +
 +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>**.
 +
 +  - Ejemplos de un tooltip que corre dentro de una lista.
 +  - El tooltip va <ttip:aquí>y no tiene información muy interesante</ttip>.
 +  - 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.
 +  - Y __aquí__ termina la lista.
 +
 +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.
 +<code>
 +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.
 +</code>
 +
 +----
 +
 +===== Pruebas y Bugs =====
 +
 +**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}}
 +{{tag>informatica dokuwiki plugins css}}
 +