<button title="este es un ejemplo de tooltip" >BOTON</button>
El ejemplo es bastante útil pero si deseamos podemos hacer un tooltip con el estilo que deseamos y mejoraría la presentación de nuestra Web. Ahora les mostraré como darles un estilo propio y de lo más simple de aplicar usando Css. Ejemplo:
<html>
<head>
<style type="text/css">
.tooltip {
text-decoration: none;
display: inline;
position: relative;
transition: all 0.5s;
}
.tooltip:hover:after {
bottom: 35px;
content: attr(title);
left: -35%;
position: absolute;
background:red;
border-radius: 5px;
color: white;
font-size:12px;
text-align: center;
width: 150px;
}
.tooltip:hover:before {
bottom: 18px;
left: 35%;
position: absolute;
content:"";
border-top: 9px solid red;
border-bottom: 9px solid transparent;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<button title="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo </button>
</center>
</body>
</html>
<head>
<style type="text/css">
.tooltip {
text-decoration: none;
display: inline;
position: relative;
transition: all 0.5s;
}
.tooltip:hover:after {
bottom: 35px;
content: attr(title);
left: -35%;
position: absolute;
background:red;
border-radius: 5px;
color: white;
font-size:12px;
text-align: center;
width: 150px;
}
.tooltip:hover:before {
bottom: 18px;
left: 35%;
position: absolute;
content:"";
border-top: 9px solid red;
border-bottom: 9px solid transparent;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<button title="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo </button>
</center>
</body>
</html>
No hay comentarios.:
Publicar un comentario