JavaScript Positioning for Tooltips, Popovers, Dropdowns Library

Floating UI is a low-level library for positioning “floating” elements like tooltips, popovers, dropdowns, menus, and more. Since these types of elements float on top of the UI without disrupting the flow of content, challenges arise when positioning them.

Floating UI exposes primitives which enable a floating element to be positioned next to a given reference element while appearing in view for the user as best as possible. Features include overflow prevention (or collision awareness), placement flipping, and more.

• Tiny: 600-byte core with highly modular architecture for tree-shaking
• Low-level: Hyper-granular control over positioning behavior
• Pure: Predictable, side-effect free behavior
• Extensible: Powerful middleware system
• Platform-agnostic: Runs on any JavaScript environment which provides measurement APIs, including the web and React Native

positioning elements in javascript, position html css, simple tooltip javascript, javascript position absolute, custom tooltip using javascript

How to make use of it:

1. Install and import the floating UI.

# Yarn
$ yarn add @floating-ui/dom

# NPM
$ npm i @floating-ui/dom

import {computePosition} from '@floating-ui/dom';

2. Calculate the necessary coordinates to place the floating element next to a given reference element.

<button id="button">My button</button>
<div id="tooltip">My tooltip</div>

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
computePosition(button, tooltip).then(({x, y}) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

3. Possible options for the computePosition.

computePosition(referenceEl, floatingEl, {
  // top', 'top-start', 'top-end', 'right'
  // 'right-start', 'right-end'
  // 'bottom', 'bottom-start', 'bottom-end'
  // 'left', 'left-start', 'left-end';
  placement: 'bottom', 
  // 'absolute' | 'fixed'
  strategy: 'default'
  // autoPlacement
  // arrow
  // flip
  // hide
  // offset
  // shift
  // size
  // or a custom function
  middleware: [],
});

Fast & Versatile Positioning Library, Floating UI Plugin/Github, tooltip position based on window size

See Demo And Download

Official Website(floating-ui): Click Here

This superior jQuery/javascript plugin is developed by floating-ui. For extra Advanced Usages, please go to the official website.