DEV Community

Cover image for Coding the Wikipedia's Tooltip!
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Coding the Wikipedia's Tooltip!

Recreating UI of popular websites is fun, today we are going to code the Wikipedia's tooltip !

If you prefer to watch the video version it's right here :

But first ...
What is a tooltip ?

A Tooltip is usually some context displayed by hovering a link, a button or an icon.

tooltip

Let's do it, step by step.

1. Create the tooltip and the links.

The links :

  <span class="tooltip"><a href="#">Tooltip1</a></span>
  <span class="tooltip"><a href="#">Tooltip2</a></span>
  <span class="tooltip"><a href="#">Tooltip3</a></span>
Enter fullscreen mode Exit fullscreen mode

The tooltip :

<div class="tooltip-container">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero tenetur non laborum dolorem laboriosam quo quibusdam assumenda dolores eveniet. Ipsum?
</div>
Enter fullscreen mode Exit fullscreen mode

Style it, with position absolute, to make it easyer to place.

.tooltip-container {
  width: 425px;
  min-height: 200px;
  padding: 15px;
  font-size: 25px;
  background: white;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3);
  position: absolute;
  z-index: 100;
  display: none;
  opacity: 0;
}
.fade-in {
  display: block;
  animation: fade 0.2s linear forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

Notice the lovely animation, to display from none to block and then animate from opacity 0 to 1 ! β™₯

2 Animate with JavaScript.

Take all the links, and the tooltip container.

const tooltips= Array.from(document.querySelectorAll(".tooltip"));
const tooltipContainer = document.querySelector(".tooltip-container");
Enter fullscreen mode Exit fullscreen mode

Listen to mouseenter and mouseout on every link and place the tooltip where the mouse is.

tooltips.forEach((tooltip) => {
  tooltip.addEventListener("mouseenter", (e) => {

    tooltipContainer.classList.add("fade-in");
    tooltipContainer.style.left = `${e.pageX}px`;
    tooltipContainer.style.top = `${e.pageY}px`;

  });

  tooltip.addEventListener("mouseout", () => {
    tooltipContainer.classList.remove("fade-in");
  });
});
Enter fullscreen mode Exit fullscreen mode

Hurray, we made it !
If you want to add custom text for each link to the tooltip, I'm showing it in the video, I don't want to make too long article.

Source code, with all the shiny CSS is right here :
https://codepen.io/Ziratsu/pen/ExgEwOw

Come and take a look at my brand new Youtube channel :
https://www.youtube.com/c/TheWebSchool
Be the pioneer that follows me uh ? 😎

See you next time for some quick and polished tutorials !

Discussion (6)

Collapse
dirtyraul profile image
DirtyRaul

Hi, nice article.

I have been looking high and low for the source code of the Wikiwand tooltips.

May I ask if I could get any help on that one here? I am really desperately in need of that tooltip.

Immensely grateful in advance for any help.

Collapse
ziratsu profile image
Ustariz Enzo Author

Hi, the source code is displayed in the article, what help de you need ?

Collapse
dirtyraul profile image
DirtyRaul

Ustariz, apologies for belated reply and, also, belated happy new year to you!

If you really can, please, please, I would be extremally grateful if you could provide the exact code for the tooltip deployed on the Wikiwand website (Wikipedia's sister?).

Go to the link below for an example and click on any blue text and you will see this magnificent tooltip and a blurred background.

wikiwand.com/en/Sound_Blaster_X-Fi

A need it for a personal project, please. I will give you U$50 for that favour. Just send me your paypal details.

Thank you again.

Collapse
sohomdatta1 profile image
Sohom Datta

This is the source code for the actual pop-ups feature on Wikipedia. :)

Collapse
ziratsu profile image
Ustariz Enzo Author

Yep !
But wanted to show how to do it without external library :)

Collapse
rahxuls profile image
Rahul

Agreed