0.2.5 • Published 9 years ago

simple-callout

Licence

MIT

Version

0.2.5

Deps

Vulns

Weekly

Summary Dependency Versions

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;
}

MIT Simpla