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

Sugerencias personalizadas con CSS puro - no se necesita JavaScript:

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

Como alternativa al atributo predeterminado title tooltips, puede crear sus propias sugerencias CSS personalizadas utilizando :before/:after pseudo elementos y HTML5 data-* atributos .

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

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

Por ejemplo, lo siguiente añadirá un tooltop situado en la parte inferior del elemento span.

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

¿Cómo funciona esto?

Puede mostrar las sugerencias personalizadas con pseudo elementos recuperando los valores de atributos personalizados utilizando el attr() función.

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

En términos de posicionamiento de la información emergente, simplemente use la selector de atributos y cambiar la colocación en función del valor del atributo.

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

CSS completo usado en el ejemplo - personaliza esto a tus 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;
}

En la mayoría de los navegadores, el atributo title se renderizará como una información sobre herramientas, y generalmente es flexible en cuanto a qué tipo de elementos trabajará.

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

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

El atributo "title" se utilizará como texto para la información sobre herramientas por el navegador, si desea aplicar estilo a él considere usar algunos complementos

Para la descripción básica, desea:

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