html - style - ¿Cómo agrego una sugerencia de herramienta a un elemento span?

span style en html

Question

En el siguiente código, quiero que aparezca una información sobre herramientas cuando el usuario desplace el espacio, ¿cómo lo hago? No quiero usar ningún enlace.

<span> text </span>

Answer 1

Información sobre herramientas personalizada con CSS puro - no se necesita JavaScript:

Ejemplo aquí (con código) / Ejemplo de pantalla completa

Como alternativa a la información de herramientas del atributo de title predeterminado, puede crear sus propias sugerencias de herramienta de CSS personalizadas utilizando :before / :after pseudo elementos y los atributos de data-* HTML5 data-* .

Usando el CSS provisto, puede agregar una información sobre herramientas a un elemento usando el atributo data-tooltip .

También puede controlar la posición de la información sobre herramientas personalizada utilizando el atributo de data-tooltip-position (valores aceptados: top / right / bottom / left ).

Por ejemplo, lo siguiente agregará un tope de herramientas colocado en la parte inferior del elemento span.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

¿Como funciona esto?

Puede mostrar la información sobre herramientas personalizada con pseudo elementos recuperando los valores de atributos personalizados utilizando la función attr() .

[data-tooltip]:before {
    content: attr(data-tooltip);
}

En términos de posicionar la información sobre herramientas, solo use el selector de atributos y cambie la ubicación en función del valor del atributo.

Ejemplo aquí (con código) / Ejemplo de pantalla completa

CSS completo utilizado en el ejemplo : personalícelo según sus necesidades.

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '''';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

Answer 2

Aquí está la manera simple, incorporada:

<span title="My tip">text</span>

Eso le da información sobre herramientas de texto sin formato. Si quieres información sobre herramientas enriquecida, con HTML formateado en ellas, necesitarás usar una biblioteca para hacerlo. Afortunadamente hay muchos de esos .

Answer 3

En la mayoría de los navegadores, el atributo de título se representará como información sobre herramientas, y generalmente es flexible en cuanto a qué tipo de elementos funcionará.

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www..com" title="Link to .com">.com</a>
<img src="something.png" alt="Something" title="Something">

Todos ellos representarán información sobre herramientas en la mayoría de los navegadores.

Answer 4

Para la descripción básica, desea:

<span title="This is my tooltip"> Hover on me to see tooltip! </span>

Answer 5

el atributo "title" se usará como texto para la información sobre herramientas del navegador, si desea aplicarle un estilo, considere usar algunos plugins