Web UI - Popper library (tooltip and popover positioning)

About

popper is a positional library that position tooltips and popovers

popper is now floating-ui 1)

It also makes sure that the positioned element never end up off screen or cropped by an overflow. (Resizing your browser will re-position the positioned elements)

Example

Tooltip

  • The content of the tooltip
<div id="tooltip" role="tooltip" >
    <h3>A tooltip</h3
    <p>Example of a tooltip on mouseenter and mouseleave</p>
</div>
  • The button that will trigger the tooltip
<button id="button" aria-describedby="tooltip">Button</button>
  • The styling of the tooltip
#tooltip {
        background: #333;
        color: white;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 4px;
}
  • The instance
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
const popperInstance = Popper.createPopper(button, tooltip,  { placement: "bottom-start" });
#tooltip {
  /* Not displayed at first */
  display: none;
}

#tooltip[data-show] {
  display: block;
}
  • Show and hide Javascript
function show() {
  tooltip.setAttribute('data-show', '');

  // We need to tell Popper to update the tooltip position
  // after we show the tooltip, otherwise it will be incorrect
  popperInstance.update();
}

function hide() {
  tooltip.removeAttribute('data-show');
}

const showEvents = ['mouseenter'];
const hideEvents = ['mouseleave'];

showEvents.forEach((event) => {
  button.addEventListener(event, show);
});

hideEvents.forEach((event) => {
  button.addEventListener(event, hide);
});

Popover

  • The content of the popover
<div id="popover" role="popover" >
    <ul>
      <li>First item</li>
      <li>Second item</li>  
    </ul>
</div>
  • The input that will trigger the popover
<input type="text" id="search-box" aria-describedby="searchbox" />
  • The styling of the popover
#popover {
        background: #333;
        color: white;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 4px;
}
  • The instance
const searchBox = document.querySelector('#search-box');
const popover = document.querySelector('#popover');
const popperInstance = Popper.createPopper(searchBox , popover,  { placement: "bottom-start" });
#popover{
    display: none; /* Not displayed at first */
}

#popover[data-show] {
  display: block;
}
  • Show and hide Javascript
function show() {
  popover.setAttribute('data-show', '');

  // We need to tell Popper to update the tooltip position
  // after we show the tooltip, otherwise it will be incorrect
  popperInstance.update();
}

function hide() {
  popover.removeAttribute('data-show');
}

const showEvents = ['focus'];
const hideEvents = ['blur'];

showEvents.forEach((event) => {
  searchBox.addEventListener(event, show);
});

hideEvents.forEach((event) => {
  searchBox.addEventListener(event, hide);
});
  • Output:
    • click in the input to get focus
    • and click on the right to blur (loose focus)





Discover More
Onboarding Guide Mixpanel
Guided Navigation

guided navigation is a navigation that guides the user step by step in order to perform a process from start to end. funnel account creation, mailing list subscription shopping cart, ...
Color Autocompletion List
How to create an Autocompletion functionality with CSS, Javascript and HTML

This article shows you how to create a search box with an autocompletion feature
Positioning Engine

Position can be really tricky, that's why there is some positioning library. They are engines for making an absolutely positioned element stay next to another element on the page. : (Components:...
UI - Popover

A popover is a overlay graphic element that shows up (pops) over the actual graphic elements when the user makes an active action on an interactive/control element such as: typing in a input box...



Share this page:
Follow us:
Task Runner