code everywhere

add styled tooltips using vanilla javascript

posted on November 13, 2021, 12:00 am in

Heres how you can add CSS styled tooltips to your webpage without any frameworks.

code

let targets document.querySelectorAll('*[data-tooltip]');

var 
createElementEx = function(idclassNameinnerHTML '') {
  var 
el document.createElement('div');
  
el.id id;
  
el.className className;
  
el.innerHTML innerHTML;
  return 
el;
};

targets.forEach(function(elem) {
  var 
uid '';

  
elem.addEventListener('mouseenter', function(event) {
    var 
elemRect elem.getBoundingClientRect();
    var 
top = (elemRect.top),
      
left = (elemRect.left) - 4;

    
left += Math.floor(elemRect.width 2) - 4;
    
uid = `tooltip-${new Date().getTime()}`;

    var 
newEl createElementEx(uid'tooltip-outer');
    var 
text createElementEx('''tooltip-inner'elem.getAttribute('data-tooltip'));
    
newEl.appendChild(text);
    
document.body.appendChild(newEl);

    var 
tooltip document.getElementById(uid);
    var 
toolRect tooltip.getBoundingClientRect();
    var 
tooltipWidth toolRect.width 18 2;

    if (
top toolRect.height 25) {
      
tooltip.style.top Math.floor(top toolRect.height 5) + 'px';
      
tooltip.style.left Math.floor(left Math.floor(toolRect.width 2) + 8) + 'px';

      var 
arrow createElementEx('''tooltip-bottom-arrow');
      
arrow.style.marginLeft = (tooltipWidth 2) + 'px';
      
tooltip.appendChild(arrow)

    } else {
      
tooltip.style.top Math.floor(elemRect.height top 8) + 'px';
      
tooltip.style.left Math.floor(left Math.floor(toolRect.width 2) + 8) + 'px';

      var 
arrow createElementEx('''tooltip-top-arrow''');
      
arrow.style.marginLeft = (tooltipWidth 2) + 'px';
      
tooltip.insertBefore(arrowtooltip.firstChild);
    }

    if ((
left toolRect.width 2)) {
      var 
diff left - (toolRect.width 2);
      
tooltip.style.left Math.floor(left Math.floor(toolRect.width 2) + diff) + 'px';
      
tooltip.style.marginLeft = ((tooltipWidth 2) + diff) + 'px';
    }
  });

  
elem.addEventListener('mouseleave', function(event) {
    var 
tooltip document.getElementById(uid);
    if (
tooltip)
      
tooltip.parentNode.removeChild(tooltip);
  });
});
.tooltip-outer {
  
positionfixed;
  
z-index999999;
}

.
tooltip-inner {
  
background#272725;
  
padding10px;
  
color#dfdfdf;
  
font-size14px;
  
border-radius3px;
  
text-alignleft;
  
max-width485px;
}

.
tooltip-top-arrow, .tooltip-bottom-arrow {
  
width0;
  
height0;
  
border-left8px solid transparent;
  
border-right8px solid transparent;
}

.
tooltip-top-arrow {
  
border-bottom8px solid #272725;
}

.
tooltip-bottom-arrow {
  
border-top8px solid #272725;
}

strong colorred; }
<span data-tooltip="my tooltip text">basic tooltip</span>

<
span data-tooltip="tooltip with embedded <strong>html</strong>">html tooltip</span>

<
span data-tooltip="my tooltip text" title="the real title attribute">tooltip with existing title</span>

demo

basic tooltip

html tooltip

tooltip with existing title

recent posts

< back
find something helpful? send us some coin BTC 1A6KbS5AmYQVAh5Zcy9rVSnMAoCEunLUqT

(ad) Need Hosting? Try Linode, VPS Starting from $5