simple-callout
v0.2.5
Published
A simple callout box/tooltip
Downloads
5
Readme
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 notorigin
| 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 originnoOutsideClick
| Boolean | false
| Disable closing the callout on outside clicksnoEscape
| 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 calloutclose()
| none
| Utility method to close the callouttoggle()
| 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