On

If any webpage has a lot of links, sometimes this may be boring for visitors to visit all of those pages. This is not also possible to make the Text Hyperlink too long. But there is an alternative solution. Tooltip! Just look at the example links below and hover your mouse over the links. If you like it, you have SourceCode too.


Live Preview of Modern Tooltip


Link Group 1


Link Group 2


Link Group 3



Customizable Hyperlink Tooltip Paste-ready Code

<p style="text-align: justify;"><span style="color: #000000; font-family: Ubuntu,sans-serif; font-size: 12pt;">Link Group 1</span></p>

<ul class="link-list">
  <li><a href="https://www.devilhunter.net/" data-tip="impressive tips and tricks with interactive tools and collection">Dear Technology Magazine</a></li>
  <li><a href="https://apps.devilhunter.net/" data-tip="We have developed more than 60 Android Apps and Games to make your life more beautiful and easier">Dear Apps Corner</a></li>
  <li><a href="https://store.devilhunter.net/" data-tip="WordPress Theme and PlugIn, Joomla Extension, JavaScript, CSS Code, Blogger Template">Dear Store</a></li>
  <li><a href="https://itsolution.devilhunter.net/" data-tip="IT Consultancy, Web and App Development, AdSense, SEO, Graphic Design, Password Recovery and Security, Online Marketing, Corporate Services">Dear IT Solution</a></li>
</ul>

<br><p style="text-align: justify;"><span style="color: #000000; font-family: Ubuntu,sans-serif; font-size: 12pt;">Link Group 2</span></p>

<ul class="link-list">
  <li><a href="https://www.example.com" data-tip="Description 1 for 1st Example Link">First Example Link</a></li>
  <li><a href="https://2.example.com" data-tip="Description 2 for 2nd Example Link">Second Example Link</a></li>
  <li><a href="https://3.example.com" data-tip="Description 3 for 3rd Example Link">Third Example Link</a></li>
  <li><a href="https://4.example.com" data-tip="Description 4 for 4th Example Link">Fourth Example Link</a></li>
</ul>

<br><p style="text-align: justify;"><span style="color: #000000; font-family: Ubuntu,sans-serif; font-size: 12pt;">Link Group 3</span></p>

<ul class="link-list">
  <li><a href="https://www.tawhidurrahmandear.com/" data-tip="Politician, Writer, Programmer">Tawhidur Rahman Dear</a></li>
  <li><a href="https://github.com/tawhidurrahmandear/customizable-hyperlink-tooltip" data-tip="Published under GPL 3 License">SourceCode on Github</a></li>
  <li><a href="https://roc.tawhidurrahmandear.com/" data-tip="Review of 193 Constitutions is a review-based research book on the Constitutions of the 193 member states of the UN, written and published by Tawhidur Rahman Dear">Review of 193 Constitutions</a></li>
</ul>

<div id="tooltip" role="tooltip"></div>

<script>
(() => {
  const tooltip = document.getElementById('tooltip');

  const OFFSET_X = 12;
  const OFFSET_Y = 8;

  function showTooltip(e) {
    const text = e.target.dataset.tip;
    if (!text) return;

    tooltip.textContent = text;
    tooltip.style.left = `${e.pageX + OFFSET_X}px`;
    tooltip.style.top = `${e.pageY + OFFSET_Y}px`;
    tooltip.style.visibility = 'visible';
  }

  function hideTooltip() {
    tooltip.style.visibility = 'hidden';
  }

  document.addEventListener('mouseover', (e) => {
    if (e.target.matches('[data-tip]')) {
      showTooltip(e);
    }
  });

  document.addEventListener('mousemove', (e) => {
    if (tooltip.style.visibility === 'visible') {
      tooltip.style.left = `${e.pageX + OFFSET_X}px`;
      tooltip.style.top = `${e.pageY + OFFSET_Y}px`;
    }
  });

  document.addEventListener('mouseout', (e) => {
    if (e.target.matches('[data-tip]')) {
      hideTooltip();
    }
  });
})();
</script>

<style>

#tooltip {
  background: lightyellow;
  border: 1px solid #000;
  border-radius: 5px;
  font-family: Ubuntu, Tahoma, Helvetica, sans-serif;
  font-size: 12px;
  text-align: left;
  padding: 6px 8px;
}

:root {
  --tooltip-offset-x: 12px;
  --tooltip-offset-y: 8px;
}

#tooltip {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
  word-break: break-word;
  white-space: normal;  
}

</style>



How this Tooltip Code works?

This code doesn't care where the link is, or how many lists you have. Easy way for infinite links in infinite locations.

  1. You can have unlimited link groups, anywhere on the same page.
  2. Every link that has data-tip="Your text" will automatically work.
  3. You do NOT need
    • multiple tooltips <div id="tooltip" role="tooltip"></div> or,
    • multiple CSS, or
    • multiple JS
  4. Don't worry about class names (link-list is optional)


Code Structure

Put the tooltip div, JS Script, CSS once, near the end of the page:



<body>


<!-- page content -->


Unlimited Links


<ul class="link-list">
 <li><a href="https://www.example.com" data-tip="Description">Example Link</a></li>
</ul>


Unlimited Links


<!-- page content -->


<div id="tooltip" role="tooltip"></div>


<script> ... </script>


<style> ... </style>


</body>