/tooltip-library

A tooltip library where the tooltip dynamically positions itself based on where the element is and on the space available, so it is always on the screen.

Primary LanguageJavaScript

Tooltip library

A tooltip library where the tooltip dynamically positions itself based on where the element is and on the space available, so it is always on the screen.

Table of contents

General info

A tooltip library where the tooltip dynamically positions itself based on where the element is and on the space available, so it is always on the screen. The library follows a sequence of Top, Bottom, Left, Right but also allows the user to define the order of positions to try. Also the user can define a spacing value to give some margin to the tooltip. It includes the four positions plus the four corners, top left, top right, bottom left and bottom right. The tooltip also displays an arrow pointing to the element and its position is also determined dynamically based on the tooltip position.

Screenshots

tooltip-library Demo

Technologies

  • HTML
  • CSS
  • JavaScript
  • Parcel Bundler

Features

List of features ready and TODOs for future development

  • Dynamically positioned tooltip
  • User can set the order of positions
  • User can change the spacing
  • Dynamically positioned tooltip's arrow

Status

Project is: finished.

Inspiration

Project based on JavaScript Simplified by Kyle Cook with the additional functionality to include 4 more positions and the tooltip's arrow dynamically positions also based on the tooltip's position.

Contact