Floater

Category: Widgets
Subcategory: Display widgets

Overview

A component to create awesome tooltips, modals and more!

Documentation

Floater

A component to create awesome tooltips, modals and more!

Features

A widget that supports placing your own widgets inside the target and the content. Hovering / clicking over the target will trigger the content to show.

  • Trigger Event Type (click | hover): The event that will trigger the Floater. It can be hover or click. Default is click.
  • No Styling (boolean): Make Floater transparent, letting you create a custom Floater within your scss files.
  • Auto-open (boolean): Open the Floater automatically.
  • Disable Flip (boolean): Disable changes in the Floater position on scroll/resize.
  • Disable Hover to Click (boolean): Don't convert hover event to click on mobile.
  • Hide Arrow (boolean): Don't show the arrow. Useful for centered or modal layout.
  • Offset (Decimal): The distance between the Floater and its target in pixels.
  • Placement (top | bottom | left | right | auto | center): The placement of the Floater. It will update the position if there's no space available.
    • Show Close Button (boolean): Display a ⨉ button to close the Floater.

Usage

  1. Install NPM package dependencies by using: npm install. If you use NPM v7.x.x, which can be checked by executing npm -v, execute: npm install --legacy-peer-deps.
  2. Run npm start to watch for code changes. On every change:
    • the widget will be bundled;
    • the bundle will be included in a dist folder in the root directory of the project;
    • the bundle will be included in the deployment and widgets folder of the Mendix test project.

Releases

Version: 1.0.0
Framework Version: 9.10.1
Release Notes: Initial version