Tooltips/es

Tooltips es una secuencia de comandos que permite mostrar información emergente relativa a ciertos elementos sobre los que se pase el cursor.

Nota: tenga en cuenta los lectores móviles y no utilice Tooltips como la única forma de mostrar contenido. Es mejor usarla como resumen rápido de un término y dejar el resto de detalles en la página.

Installation[]

Usage[]

Debe agregar una clase especial para hacer que la secuencia de comandos muestre información emergente al colocar el cursor sobre un elemento específico. Algunos tipos de información emergente también admiten parámetros adicionales especificados a través de data- (consulte la sección Configuración para obtener más información).

Hay tres tipos distintos de información emergente:

Información emergente básica – clase

basic-tooltip

Este tipo de información emergente sólo mostrará el contenido del elemento title.

<span class="basic-tooltip" title="Texto a mostrar dentro de esta información emergente">Información emergente básica</span>

Información emergente avanzada – clase

advanced-tooltip

El contenido de esta información emergente es tomado del interior del elemento con la clase tooltip-contents. El contenido del elemento se toma como presentación, permitiendo así el uso de marcadores wiki y elementos HTML para dar formato a la dicha información emergente. Debe recordar que el contenido de esta información emergente se carga junto a la página. Esto puede aumentar drásticamente los tiempos de carga de una página que incluya una gran cantidad de informaciones emergentes (incluyendo los usos repetidos de la misma).

<div class="advanced-tooltip" style="display:inline-block">Información emergente avanzada<div class="tooltip-contents">Contenido de información emergente<br><code>Etiquetas HTML incluídas</code></div></div>

Advanced tooltips will cause a new line when they're used inline if any of the tooltip content contains a block-level tag (regardless of styles), due to the MediaWiki parser automatically adding <p> tags to the subsequent text. This can be solved by wrapping the entire text in a <span> or <div> to suppress the automatic <p> tag, e.g.

<span>This is an example of <span class="advanced-tooltip">Información emergente avanzada<div class="tooltip-contents">Tooltip content</div></span> being used inline.</span>

This is an example of being used inline.

Información emergente personalizada – clase

contenido propio

Este tipo permite el mayor control sobre el contenido de información emergente, así como reducidos tiempos de carga en la página. Se pueden usar plantillas para generar información emergente y pasar parámetros a la plantilla por medio de los atributos data- del elemento sobre el que se está desplazando. Su ventaja sobre información emergente avanzada es que el contenido de información emergente se cargará cuando sea necesario, y se cargará una sola vez una misma información emergente para varios elementos (que disponga de los mismos parámetros).

<span class="custom-tooltip-text" data-parameter="Algunos valores">Información emergente personalizada – text</span>

<span class="custom-tooltip-parse" data-parameter="Algunos valores">Información emergente personalizada – parse</span>

Combinación[]

Se pueden combinar diferentes tipos de información emergente para mostrarlos simultáneamente. El orden que tendrá dicha información será el mismo que tengan las clases.

<div class="advanced-tooltip basic-tooltip custom-tooltip-parse custom-tooltip-text" data-parameter="Parámetro" style="display: inline-block;">Información emergente avanzada<div class="tooltip-contents">Advanced tooltip</div></div>

Configuration[]

Si no se establece configuración alguna, la secuencia de comandos sólo admitirá información emergente básica y avanzada. Hay 3 variables que contienen la configuración de la secuencia de comandos. Puede especificarlos en el MediaWiki:Common.js de su wiki.

Configuración principal – `tooltips_config`[]

Aquí puede ajustar algunas características principales usando este objeto:

events: Es una lista de eventos de JavaScript del objeto de ventana que desencadenará la búsqueda de cuadros de información emergente que no estaban presentes cuando se inició la secuencia de comandos. De esta manera, puede hacer que la información emergente funcione en un elemento de interfaz personalizado que se agregue tras la carga de la página y activación de información emergente. Por ejemplo, en un módulo personalizado del rail derecho.
noCSS: Si desea deshabilitar la importación de CSS predeterminado configúrelo en true.
offsetX / offsetY: Son valores que moverán el cuadro de información emergente hacia la derecha y abajo (respectivamente) desde donde apunta el cursor (recuerde que puede mover aun más el margen de la información emergente en sí). El valor predeterminado para ambos es 8, no recomendándose establecer inferiores a 5.
waitForImages: Esto alterará el comportamiento del cuadro de información emergente cuando contenga imágenes en su interior. De forma predeterminada (false), la información emergente se mostrará incluso si las imágenes aún no están completamente cargadas. Las imágenes eventualmente aparecerán cuando se carguen (carga diferida). Establecer este valor en true hará que la secuencia de comandos espere a que todas las imágenes se carguen por completo antes de mostrar el cuadro de información emergente.

Ejemplo del objeto de configuración:

window.tooltips_config = {
    events: ['CustomEvent'],
    noCSS: true,
    offsetX: 5,
    offsetY: 10,
    waitForImages: true,
}

Creación de tipos de información emergente personalizada – `tooltips_list`[]

Puede agregar su propia información emergente a esta matriz. Cada tipo de información emergente es un objeto con las siguientes propiedades:

classname: Clase CSS que activará la información emergente de este tipo. Es una propiedad obligatoria.
onParsed: Esta función se ejecutará cuando se obtenga el análisis sintáctico (con la información emergente siendo su contexto - this).
parse: Similar a text pero el texto resultante será analizado sintácticamente, permitiendo el uso de sintaxis wiki, pero a costa de un breve retraso en la carga.
text: Esta cadena o función se utilizará como contenido de la información emergente.

Tanto text como parse pueden ser una cadena o una función.

Si el valor es una "cadena", puede utilizar parámetros que se tomarán del elemento al que apunta el cursor. Para usar un parámetro, debe agregar al texto lo siguiente: <#parameter-name#>. Esta etiqueta será reemplazada con el valor del atributo data-parameter-name del elemento. Puede utilizar varios parámetros diferentes o un mismo parámetro varias veces.

{{Plantilla|<#value#>}}  <!-- <#value#> será reemplazado con el contenido del atributo data-value -->

Otra forma es especificar una función que se ejecutará cada vez que se coloque el cursor sobre un nuevo elemento sin información energente. Esta función tendrá dicho elemento como contexto y deberá devolver el contenido de la información emergente (o wikitexto a analizar sintácticamente). La cadena devuelta no admitirá parámetros como la anterior cuando pueda accederse a cualquier atributo manualmente (ejemplo: $(this).data('parameter-name')).

Ejemplo de un objeto con configuración para un tipo de información emergente:

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: '{'+'{Tooltip|<#name#>|<#value#>}}',   // '+' hace que MediaWiki ignore la plantilla en la página con configuración
}

Example of an object with a parse function:

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: function parse(elem) { return '{'+'{Tooltip|' + $(elem).data('name') + '|' + $(elem).data('value') + '}}' },
}

Propiedades comunes[]

{Estas propiedades se pueden utilizar para todos los tipos, incluidas las integradas (basic-tooltip y advanced-tooltip)

delay: Demora, literalmente. Hará que la información emergente aparezca tras una demora especificada en milisegundos. Sugerencia: 1 segundo = 1000 milisegundos.
onShow / onHide: Son pseudoeventos que se activarán (respectivamente) justo después de que se muestre la información emergente, justo antes de que se oculte. Son funciones de devolución de llamada con la información emergente en sí misma, teniendo por contexto (this) y como argumento el identificador de desplazamiento que activó la información emergente.

Ejemplo de configuración para dos cuadros de información emergentes personalizados, y modificación del comportamiento de la información emergente básica:

window.tooltips_list = [
    {
        classname: 'custom-tooltip-text',
        text: "Parameter: <#parameter#><br>Esto es sólo texto y HTML - el wikitexto '''no''' será analizado sintácticamente",
    }, {
        classname: 'custom-tooltip-parse',
        parse: '{|style="white-space:nowrap;"\n!Parameter:\n|<#parameter#>\n|-\n!Lc:\n|{'+'{lc:<#parameter#>}}\n|-\n!Uc:\n|{'+'{uc:<#parameter#>}}\n|-\n!PAGENAME:\n|{'+'{PAGENAME}}\n|}',
    }, {
        classname: 'basic-tooltip',
        delay: 500,
        onHide: function(handle) { $(this).html($(handle).html()) },
    },
]

Modo de depuración – `tooltips_debug`[]

Establecerlo en true hará que algunos elementos sean visibles, lo que facilitará la detección de problemas. El modo de depuración también se puede activar temporalmente agregando ?ttdebug=true al final de la URL, tal que así: https://dev.fandom.com/wiki/Tooltips?ttdebug=true

Otras notas y consejos[]

Clases adicionales para información emergente:
- has-redlinks - se añade a cuadros de información emergente que tengan enlaces rojos en su interior; se puede utilizar para ocultar información emergente con plantillas faltantes.
- tooltip-loading - se añade a cuadros de información emergente que siguen a la espera de que se cargue contenido analizado sintácticamente; se puede utilizar para mostrar el indicador de carga o simplemente ocultar la información emergente hasta que esté lista.
- tt-tooltip-type - cada cuadro de información emergente recibe una clase en función de su tipo (ejemplo: tt-basic-tooltip); ideal para tener diferentes tipos de diseño para información emergente.
Si su cuadro de información emergente posee sombra, es posible que desee añadirle espacio agregándole margen o relleno al div que contiene dicha información emergente activa (#tooltip-wrapper).

Muestras[]

Siéntase libre de agregar su wiki a la lista si usa esta secuencia de comandos, para mostrar cómo funciona en acción :)

My Life as a Teenage Rabbot Wiki
Age of Wonders 3 Wiki
Doraemon Wiki: en, hi
Escape From Tarkov Wiki
Factorio Wiki: en, ru
Final Fantasy Wiki
Unordinary Wiki
Ikariam Wiki
Inkbound Wiki
Interstellar Space: Genesis
League of Legends Wiki: de, en, es, pl, ru, vi
Love Live! Wiki Vietnam
Love Nikki Wiki
Nova Drift Wiki
Paragon Wiki
Re:Monster Wiki
Risk of Rain Wiki
Sparta Remix Wiki
Symphogear Wiki
Tangledeep Wiki
WARFRAME Wiki: en, ru
Zero Game Wiki
Subnautica Fanon Wiki
Shadow Slave Wiki
The Binding of Isaac Wiki: ru

Tooltips/es

Contents

Installation[]

Usage[]

Combinación[]

Configuration[]

Configuración principal – `tooltips_config`[]

Creación de tipos de información emergente personalizada – `tooltips_list`[]

Propiedades comunes[]

Modo de depuración – `tooltips_debug`[]

Otras notas y consejos[]

Muestras[]

See also[]

Tooltips/es

Installation[]

Usage[]

Combinación[]

Configuration[]

Configuración principal – tooltips_config[]

Creación de tipos de información emergente personalizada – tooltips_list[]

Propiedades comunes[]

Modo de depuración – tooltips_debug[]

Otras notas y consejos[]

Muestras[]

See also[]

Configuración principal – `tooltips_config`[]

Creación de tipos de información emergente personalizada – `tooltips_list`[]

Modo de depuración – `tooltips_debug`[]