Custom Tooltip That Follows Your Cursor – TooltipJS

Preview:

Description:

A really simple JavaScript plugin to create custom tooltips that follow the mouse movement and position.

How to use it:

1. Add the data-tooltip-container attribute to the target element and define the tooltip content in the data-tooltip-label:

<img src="https://source.unsplash.com/ODG3C3udpsc/450x600"
     data-tooltip-container
     data-tooltip-label="I'm A Tooltip"
/ >

2. Load the tooltip.js script at the end of the document.

<script src="./tooltip.js"></script>

3. Apply styles to the tooltip.

.tooltip {
  position: absolute;
  width: 140px;
  padding: 15px 10px;
  border-radius: 4px;
  font-family: 'Nunito';
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}