Información sobre herramientas multilínea de Spectre

La información sobre herramientas de Spectre es bastante útil para mostrar la descripción de diferentes elementos en la página web. La información sobre herramientas se puede invocar en cualquier elemento de una página web. Proporciona etiquetas de información de contexto que aparecen al pasar el mouse y enfocar. El componente Tooltips está construido completamente en CSS.

La información sobre herramientas normal intentará mostrar el contenido de información sobre herramientas de datos en una sola línea, por lo que debido a esa información sobre herramientas puede aparecer en un elemento diferente. Es por eso que necesitamos información sobre herramientas de varias líneas.

Clase de información sobre herramientas de líneas múltiples de Spectre: no hay una clase predefinida para esto, solo necesita agregar la string \n entre cualquier texto para la información sobre herramientas de líneas múltiples.

Sintaxis:

<button class="btn tooltip" 
        data-tooltip=".... \n ...">
        ....
</button>

Ejemplo: El siguiente ejemplo ilustra la información sobre herramientas de Spectre Multiline. La información sobre herramientas de varias líneas solo funciona en Opera.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE Multiline Tooltip Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Multiline Tooltip Class</strong>
        <br><br>
        <button class="btn tooltip tooltip-left"
                data-tooltip="Left Tooltip \n Multiline">
            Left Tooltip
        </button>
        <button class="btn tooltip tooltip-top"
                data-tooltip="Top Tooltip \n Multiline">
            Top Tooltip
        </button>
        <button class="btn tooltip tooltip-bottom"
                data-tooltip="Bottom Tooltip \n Multiline">
            Bottom Tooltip
        </button>
        <button class="btn tooltip tooltip-right"
                data-tooltip="Right Tooltip \n Multiline">
            Right Tooltip
        </button>
    </center>
</body>
 
</html>

Producción:

Información sobre herramientas de Spectre Multiline

Referencia: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips-multiline

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta