@lion/popup NPM

Popup

🛠 Status: Pilot Phase
Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.
The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:
not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
not publicly promote or link products derived from/based on Lion Web Components
As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

lion-popup is a component used for basic popups on click. Its purpose is to show content appearing when the user clicks an invoker element with the cursor or with the keyboard.

Features

Show content when clicking the invoker
Use the position property to position the content popup relative to the invoker

How to use

Installation

npm i --save @lion/popup

import '@lion/popup/lion-popup.js';

Example

<lion-popup>
  <div slot="content" class="tooltip">This is a popup<div>
  <a slot="invoker" href="https://www.google.com/">
    Popup on link
  </a>
</lion-popup>

lion web-components popup

@lion/core @lion/overlays

@everything-registry/sub-chunk-551 @zalastax/nolb-_lio

4 years ago

4 years ago

4 years ago

4 years ago