La información sobre herramientas de enlace es una excelente manera de mostrar información adicional cuando se pasa el cursor sobre un elemento o enlace. Hay varias maneras de hacer esto.
Usando CSS y jQuery: Los eventos mousenter y mouseleave se usan en jQuery para realizar esta operación.
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
display: none;
position: absolute !important;
width: 200px;
padding: 10px;
margin: 0 0 3px 0;
color: #fff;
z-index: 1;
font-size: 50px;
text-decoration: none;
text-align: center;
}
.tooltip:after {
position: absolute !important;
bottom: -14px;
z-index: 1;
}
.tooltip:before {
content: "";
position: absolute !important;
bottom: -14px;
z-index: 100;
}
</style>
</head>
<body>
<a href="#" class="link" title="Hello world!"
class="tooltip_link left">
Hover over me!
</a>
<script>
$("a").mouseenter(function (e) {
var $x = e.pageX - this.offsetLeft;
var $tooltip_text = $(this).attr("title");
$(this).append('<div class="tooltip">'
+ $tooltip_text + '</div>');
$("a > div.tooltip.").fadeIn(300);
});
$("a").mouseleave(function () {
$("a > div.tooltip.").fadeOut(300)
.delay(300)(function () {
$(this).remove();
});
});
</script>
</body>
</html>
Producción:
Después de pasar el mouse sobre «¡Pase el mouse sobre mí!» , la salida es
Hello world!
Uso de jQuery UI: el widget de información sobre herramientas de jQuery UI ayuda a personalizar la información sobre herramientas. El método tooltip() se usa para agregar información sobre herramientas a cualquier elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery Links -->
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style type="text/css">
.example {
padding-left: 2rem !important;
margin-top: 3rem;
text-decoration: none;
color: green;
}
</style>
</head>
<body>
<a class="example" id="myTooltip"
href="#" title="Hello world!">
Hover Over me!
</a>
<script>
$(function () {
$("#myTooltip").tooltip();
});
</script>
</body>
</html>
Producción:
Usando solo CSS: la información sobre herramientas se puede crear usando CSS y se puede personalizar como cualquier otro elemento.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
margin-top: 3rem;
}
.tooltip .tooltiptext {
width: 8rem;
text-align: center;
border-radius: 4px;
background-color: green;
color: #fff;
padding-top: 9px;
padding-bottom: 9px;
position: absolute;
z-index: 1;
bottom: 165%;
margin-left: -55px;
left: 50%;
transition: opacity 0.5s;
visibility: hidden;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: green
transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">Hover over me!
<span class="tooltiptext">
Hello world!
</span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por prachimantri y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA