0.2.5 • Published 8 years ago
simple-callout v0.2.5
Simple Callout
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;
}
--
MIT © Simpla
0.2.5
8 years ago