{"id":28894,"date":"2024-04-08T07:41:32","date_gmt":"2024-04-08T06:41:32","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/guia-completa-para-crear-tooltips-dinamicos-con-javascript-puro\/"},"modified":"2024-06-03T17:43:11","modified_gmt":"2024-06-03T16:43:11","slug":"guia-completa-para-crear-tooltips-dinamicos-con-javascript-puro","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/","title":{"rendered":"Complete Guide to Creating Dynamic Tooltips with Pure JavaScript"},"content":{"rendered":"<p>User-computer interaction is a crucial aspect of modern web design. An effective technique to improve usability and provide additional information without cluttering the visual interface is <em>tooltips<\/em>. These small pop-up messages help clarify functions or data, significantly improving the user experience. Today we will learn how to develop custom tooltips using JavaScript exclusively, without the need for external libraries.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#%C2%BFQue_es_un_Tooltip\" >What is a Tooltip?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#Ventajas_de_los_Tooltips_Dinamicos\" >Advantages of Dynamic Tooltips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#Creando_un_Tooltip_Basico_con_HTML_y_CSS\" >Creating a Basic Tooltip with HTML and CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#HTML\" >Html<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#CSS\" >css<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#Implementacion_con_JavaScript_Puro\" >Implementation with Pure JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#Estructura_Basica_del_JavaScript\" >Basic Structure of JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#Personalizacion_Avanzada\" >Advanced Customization<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/complete-guide-to-creating-dynamic-tooltips-with-pure-javascript\/#Mejores_Practicas_y_Consejos_Finales\" >Best Practices and Final Tips<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_un_Tooltip\"><\/span>What is a Tooltip?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A tooltip is a text message that appears as a floating label in response to a user event, typically hovering over an interface element. These are especially useful for providing additional details or clarifications without needing to disrupt the main workflow or visual presentation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ventajas_de_los_Tooltips_Dinamicos\"><\/span>Advantages of Dynamic Tooltips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Creating dynamic tooltips has multiple benefits:<\/p>\n<ul>\n<li><strong>Improve accessibility<\/strong>: Makes it easier for users to understand complex functions or less clear data.<\/li>\n<li><strong>Save space<\/strong>: By displaying only when necessary, it avoids information overload on the screen.<\/li>\n<li><strong>Customization<\/strong>: Offers the possibility of adapting specific styles and content, aligning them with the branding of the application or website.<\/li>\n<li><strong>Interactivity<\/strong>: Increases the dynamics of interaction with the user, creating a richer and friendlier user experience.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Creando_un_Tooltip_Basico_con_HTML_y_CSS\"><\/span>Creating a Basic Tooltip with HTML and CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we dive into JavaScript, let&#039;s start by defining the basic structure with HTML and CSS, which is essential for any tooltip.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML\"><\/span>Html<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The HTML for a tooltip is quite simple. We need a container that will have the text or element on which we want to display the tooltip, and the tooltip message itself, which will initially be hidden.<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;div class=&quot;tooltip-container&quot;&gt;\n  Hover here for more information.\n  &lt;span class=&quot;tooltip-content&quot;&gt;This is the hidden message that appears when you hover.&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"CSS\"><\/span>css<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In CSS, we will use the property <code>visibility<\/code> With <code>opacity<\/code> to control the appearance of the tooltip. Furthermore, we will use <code>position: absolute<\/code> to position the tooltip right where we need it.<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.tooltip-container { position: relative; cursor: pointer; } .tooltip-content { visibility: hidden; width: 120px; background-color: black; colour: white; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.5s; } .tooltip-container:hover .tooltip-content { visibility: visible; opacity: 1; }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Implementacion_con_JavaScript_Puro\"><\/span>Implementation with Pure JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now, to make our tooltips really dynamic and customizable, we will use JavaScript. The idea is to create tooltips that can adapt in content and style depending on the data coming from various sources, such as an API or a database.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Estructura_Basica_del_JavaScript\"><\/span>Basic Structure of JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First, we need to access the element and the content of the tooltip, and then show or hide it depending on the user&#039;s action.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.addEventListener(&#039;DOMContentLoaded&#039;, function () { const tooltips = document.querySelectorAll(&#039;.tooltip-container&#039;); tooltips.forEach(function (tooltip) { tooltip.addEventListener(&#039;mouseover&amp;# 039;, function () { this.querySelector(&#039;.tooltip-content&#039;).style.visibility = &#039;visible&#039;; this.querySelector(&#039;.tooltip-content&#039;).style.opacity = &#039;1&#039;; . addEventListener(&#039;mouseout&#039;, function () { this.querySelector(&#039;.tooltip-content&#039;).style.visibility = &#039;hidden&#039;; this.querySelector(&#039;.tooltip-content&#039;). style.opacity = &#039;0&#039;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Personalizacion_Avanzada\"><\/span>Advanced Customization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Let&#039;s now consider that we want to customize the message of our tooltip dynamically, according to the user&#039;s data. To do this, we could modify the content of the tooltip using JavaScript as follows:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">tooltip.addEventListener(&#039;mouseover&#039;, function (event) { const userID = event.target.getAttribute(&#039;data-user-id&#039;); fetch(`https:\/\/api.mysite.com\/user\/${ userID}\/tooltip-info`) .then(response =&gt; response.json()) .then(data =&gt; { this.querySelector(&#039;.tooltip-content&#039;).textContent = data.tooltipText; this.querySelector( &#039;.tooltip-content&#039;).style.visibility = &#039;visible&#039;; this.querySelector(&#039;.tooltip-content&#039;).style.opacity = &#039;1&#039;;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Mejores_Practicas_y_Consejos_Finales\"><\/span>Best Practices and Final Tips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When implementing tooltips, it is essential to consider some aspects to avoid compromising usability:<\/p>\n<ul>\n<li><strong>Do not overload<\/strong>: Tooltips should be brief and to the point.<\/li>\n<li><strong>Usability testing<\/strong>: Make sure that tooltips truly improve the user experience and do not confuse it.<\/li>\n<li><strong>Accessibility<\/strong>: Also consider users who use screen readers or who cannot use a mouse.<\/li>\n<li><strong>Responsive<\/strong>: Make sure tooltips look good on mobile devices and different screen sizes.<\/li>\n<\/ul>\n<p>Creating dynamic tooltips in pure JavaScript is an excellent way to improve interactivity and usability in your web projects. With a little creativity and tweaking, you can offer a full range of informative and aesthetic possibilities. Don&#039;t forget to visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> For more resources and guides, or if you need to contact me, you can do so through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">this link<\/a>. Happy coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>User-computer interaction is a crucial aspect of modern web design. An effective technique to improve usability and provide additional information without cluttering the visual interface is tooltips. These small pop-up messages help clarify functions or data, significantly improving the user experience. Today we will learn how to develop custom tooltips using only [\u2026]<\/p>","protected":false},"author":1,"featured_media":28895,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1901],"tags":[205,500,90,340,491,358,185,60,627,1008,1825,2004],"class_list":["post-28894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-proyecto","tag-blog","tag-completa","tag-con","tag-crear","tag-dinamicos","tag-guia","tag-javascript","tag-para","tag-proyecto","tag-pruebas","tag-puro","tag-tooltips"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28894"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28894\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28895"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}