Foundation Tooltip

El tooltip se muestra cuando el ratón se mueve sobre el elemento:

Podemos agregar en cualquier elementodata-tooltipel atributo para crear la información de tooltip. Usatitleel atributo para establecer el texto de la información de tooltip.

Nota:El slider requiere JavaScript. Por lo tanto, necesitas inicializar Foundation JS:

Ejemplo

<span data-tooltip title="Hooray!">Hover over me!</span>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Pruébalo »

.has-tipLa clase puede poner en negrita el texto sobre el que se mueve el ratón:

Ejemplo

<span data-tooltip class="has-tip" title="Hooray!">Hover over me!</span>

Pruébalo »

Posición del tooltip

Por defecto, el tooltip aparece en la parte inferior del elemento.

Se puede usar.tip-top, .tip-left, .tip-right or .tip-bottom(por defecto) para establecer la posición del tooltip.

Nota:En pantallas de tamaño pequeño, el ancho del tooltip es 100%.

Ejemplo

<span data-tooltip class="has-tip tip-top" title="Hooray!">Top</span>
<span data-tooltip class="has-tip tip-bottom" title="Hooray!">Bottom</span>
<span data-tooltip class="has-tip tip-left" title="Hooray!">Left</span>
<span data-tooltip class="has-tip tip-right" title="Hooray!">Right</span>

Pruébalo »

Tooltip con esquinas redondeadas

.radiusy.roundLa clase se usa para establecer tooltips con esquinas redondeadas:

Ejemplo

<span data-tooltip class="has-tip" title="Hooray!">Default</span>
<span data-tooltip class="has-tip radius" title="Hooray!">Radius</span>
<span data-tooltip class="has-tip round" title="Hooray!">Round</span>

Pruébalo »
Otras extensiones