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