simple-callout

v0.2.5

Published

3 years ago

A simple callout box/tooltip

0High
0Medium
0Low

simpla

web components simple-callout

Simple Callout

Version Size

A simple, style-agnostic callout box that can be shown and hidden from any position.

Installation & usage

Install simple-callout with Bower

$ bower install simple-callout --save

Import it into the <head> of your page

<link rel="import" href="/bower_components/simple-callout/simple-callout.html">

Then use simple-callout in your project

<simple-callout arrow="top left">
  <span>My callout contents</span>
</simple-callout>

To ensure that the content inside the callout is layered on top of the callout's arrow, always use elements rather than just text nodes (eg: <span>text</span> instead of text);

Polyfills for cross-browser support

Simple callout relies on emerging standards, and you will need to include polyfills for cross-browser support:

Web Components Lite for all non-chrome browsers
A Promise polyfill, like es6-promise, for IE 10 & 11 support.

<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

Options

Property | Type | Default | Description
---------------- | ------- | ----------- | ------------
active | Boolean | false | Controls whether the callout is visible or not
origin | String | undefined | The origin position that the callout expands from. Can be any combination of top/bottom/left/right/center arrow | Boolean | false | Whether the callout has a little arrow at its origin
noOutsideClick | Boolean | false | Disable closing the callout on outside clicks
noEscape | Boolean | false | Disable closing the callout on escape key presses

<simple-callout origin="bottom center" arrow no-escape></simple-callout>

Methods

Method | Arguments | Description
---------- | --------- | ------------
open() | none | Utility method to open the callout
close() | none | Utility method to close the callout
toggle() | none | Utility method to toggle the callout

Styling

In addition to styling the callout directly, you can also set these CSS properties

Property | Default | Description
----------------------------- | ---------| ------------
--simple-callout-arrow-size | 8px | Size of the callout's arrow

Apply properties on simple-callout

simple-callout {
  --simple-callout-arrow-size: 12px;
}

Published

Vulnerabilities

Links

Maintainers

Keywords