El estilo del atributo del título de la etiqueta <a> (anclaje) está predefinido para el navegador y puede diferir de un navegador a otro. La página web no puede mostrar los cambios en la información sobre herramientas si se basa en el atributo de título.
La opción es hacer una información sobre herramientas falsa usando las propiedades CSS de acuerdo con el deseo. Para hacer esto, se debe usar el atributo data-title. El método de atributos data-* se utiliza para almacenar datos personalizados que son privados para la página o la aplicación. Hay varias formas de acceder a ellas que pueden ser utilizadas por CSS.
Ejemplo 1: este ejemplo hace que la información sobre herramientas sea más grande y con un color de fondo diferente.
<!DOCTYPE html>
<html>
<head>
<title>
How to Change the Style of
Anchor Tag Title Attribute?
</title>
<style>
[data-title]:hover:after {
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #4b9c2c;
color: #ffffff;
font-size: 150%;
position: absolute;
padding: 4px 8px 4px 8px;
visibility: hidden;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Change the Style of Anchor
Tag Title Attribute
</h3>
<a href="geeksforgeeks.org"
data-title="GFG">
Link
</a> Title with different
background color and style
<br>
<a href="geeksforgeeks.org" title="GFG">
Link
</a> Title with a normal tool-tip
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo le da un mejor estilo a la información sobre herramientas que al último usando algunas propiedades CSS mejores.
<!DOCTYPE html>
<html>
<head>
<title>
How to Change the Style of
Anchor Tag Title Attribute?
</title>
<style>
[data-title]:hover:after {
opacity: 1;
transition: all 0.2s ease 0.6s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
position: absolute;
padding: 4px 8px 4px 8px;
color: #222;
border-radius: 5px;
box-shadow: 0px 0px 15px #222;
background-image: -webkit-linear-gradient(
top, #f8f8f8, #cccccc);
background-image: -moz-linear-gradient(
top, #f8f8f8, #cccccc);
background-image: -ms-linear-gradient(
top, #f8f8f8, #cccccc);
background-image: -o-linear-gradient(
top, #f8f8f8, #cccccc);
visibility: hidden;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Change the Style of Anchor
Tag Title Attribute
</h3>
<a href="geeksforgeeks.org"
data-title="GFG">
Link
</a> with styled tooltip
<br>
<a href="geeksforgeeks.org" title="GFG">
Link
</a> with normal tooltip
</body>
</html>
Producción: