st-popup-menu is a web component to easily display a popup menu on hover (or click) another element.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
LICENSE
package-lock.json
package.json
readme.md
stencil.config.js
tsconfig.json

readme.md

Built With Stencil

st-popup-menu

st-popup-menu is a web component built with Stencil to easily display a popup menu on hover (or click) another element.

Demo

Getting Started

To try this component:

git clone git@github.com:andregoncalves/st-popup-menu.git
cd st-popup-menu
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

  • Put <script src='https://unpkg.com/st-popup-menu@latest/dist/st-popup-menu.js'></script> in the head of your index.html
  • Then you can use the component

Node Modules

  • Run npm install st-popup-menu --save
  • Put a script tag similar to this <script src='node_modules/st-popup-menu/dist/st-popup-menu.js></script> in the head of your index.html
  • Then you can use the element <st-popup-menu> anywhere in your template, JSX, html etc

In a stencil-starter app

  • Run npm install st-popup-menu --save
  • Add this import to your root component or root module: import 'st-popup-menu';
  • Then you can use the element <st-popup-menu> anywhere in your template, JSX, html etc

In a React/Rollup/Webpack app

  • Run npm install st-popup-menu --save
  • Add this import to your root component or root module: import { defineCustomElements } from 'st-popup-menu';;
  • Call defineCustomElements(window); in your js file

Parameters

Attribute Default Description
target '' A DOMString containing one selector to match an element
trigger 'hover' The trigger that causes popup to be shown either hover or click
delay '500' The delay (in ms) until the popup is hidden after mouse out.
backgroundColor 'white' Popup background color
borderColor 'black' Popup border color
borderWidth '1px' Popup border width

Events

The st-popup-menu element emits a show and hide events whenever the popup is shown or hidden.

element = document.querySelector('st-popup-menu');
element.addEventListener('show', (e) => {
  // Reference to popup html node
  console.log(e.detail);
});

element.addEventListener('hide', (e) => {
  // Reference to popup html node
  console.log(e.detail);
});

Example usage

<st-popup-menu target="img1" trigger="hover" delay="200">
  <div>Popup contents here</div>
</st-popup-menu>