¿Cómo agrego una información sobre herramientas a un elemento de tramo?
En el siguiente código, quiero que aparezca una información sobre herramientas cuando el usuario pasa el cursor sobre el intervalo, ¿cómo lo hago? No quiero utilizar ningún enlace.
<span> text </span>
Esta es la forma sencilla e integrada:
<span title="My tip">text</span>Eso le brinda información sobre herramientas de texto sin formato. Si desea información sobre herramientas rica, con HTML formateado, necesitará usar una biblioteca para hacerlo. Afortunadamente hay muchos de esos .
Información sobre herramientas personalizadas con CSS puro, no se necesita JavaScript:
Ejemplo aquí (con código) / Ejemplo de pantalla completa
Como alternativa a la información sobre herramientas de atributos predeterminada ,title puede crear su propia información sobre herramientas CSS personalizada utilizando :beforepseudoelementos y atributos HTML5 .:after data-*
Usando el CSS proporcionado, puede agregar información sobre herramientas a un elemento usando el data-tooltipatributo.
También puede controlar la posición de la información sobre herramientas personalizada utilizando el data-tooltip-positionatributo (valores aceptados: top/ right/ bottom/ left).
Por ejemplo, lo siguiente agregará una parte superior de herramientas ubicada en la parte inferior del elemento de tramo.
<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>
¿Cómo funciona esto?
Puede mostrar información sobre herramientas personalizada con pseudoelementos recuperando los valores de atributos personalizados utilizando la attr()función.
[data-tooltip]:before {
content: attr(data-tooltip);
}
En términos de posicionamiento de la información sobre herramientas, simplemente use el selector de atributos y cambie la ubicación según el 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;
}
En la mayoría de los navegadores, el atributo de título se mostrará como información sobre herramientas y, en general, es flexible en cuanto a con qué tipo de elementos funcionará.
<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 mostrarán información sobre herramientas en la mayoría de los navegadores.
Para la información sobre herramientas básica, desea:
<span title="This is my tooltip"> Hover on me to see tooltip! </span>