Custom Tooltip That Follows Your Cursor – TooltipJS

Category: Javascript , Tooltip | February 6, 2020
Author:nathco
Views Total:6,755 views
Official Page:Go to website
Last Update:February 6, 2020
License:MIT

Preview:

Custom Tooltip That Follows Your Cursor – TooltipJS

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;
}

You Might Be Interested In:


One thought on “Custom Tooltip That Follows Your Cursor – TooltipJS

Leave a Reply