Chi · Popover

Popover

Base

To render a popover, add your HTML code to a data-popover-content attribute. Then, you can initialize it with the chi.popover factory method.

<button id='popover-1' class="a-btn" data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover!</h5><p>This is a popover content triggered by a button. </p></div>'>Popover</button>
<script>chi.popover(document.getElementById('popover-1'));</script>

You can also link the popover via data-target attribute.

TipDon't add the arrow to the Popover template. It is configured via the arrow configuration parameter.

TipIf you specify the content via the data-content attribute or the content configuration parameter, it will override the contents of the target. Use it wisely.

<button class="a-btn" id="popover-1b" data-target="#popover-in-html">Popover</button>
<!-- put the following code anywere in the DOM, e.g. at the end of the DOM -->
<div class="m-popover" id="popover-in-html">
  <div class="-px--2 -py--1 -s--3">
    <h5>Popover!</h5>
    <p>This is a popover content in the dom.</p>
  </div>
</div>
<script>chi.popover(document.getElementById('popover-1b'));</script>

Positioning

By default, popover's position on top of an element. To alter position, use the data-position attribute. Valid values are top, right, bottom, left, top-start, top-end, right-start, right-end, bottom-start, bottom-end, left-start, left-end.

Top
Right
Bottom
Left

<button data-position='top' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is top positioned.</p></div>' class="a-btn">Top popover</button>
<button data-position='top-start' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is top start positioned.</p></div>'>Top start popover</button>
<button data-position='top-end' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is top end positioned.</p></div>'>Top end popover</button>
<script>chi.popover(document.querySelectorAll('[data-popover-content])');</script>

<button data-position='right' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is right positioned.</p></div>'>Right popover</button>
<button data-position='right-start' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is right start positioned.</p></div>'>Right start popover</button>
<button data-position='right-end' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is right end positioned.</p></div>'>Right end popover</button>
<script>chi.popover(document.querySelectorAll('[data-popover-content])');</script>

<button data-position='bottom' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is bottom positioned.</p></div>'>Bottom popover</button>
<button data-position='bottom-start' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is bottom start positioned.</p></div>'>Bottom start popover</button>
<button data-position='bottom-end' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is bottom end positioned.</p></div>'>Bottom end popover</button>
<script>chi.popover(document.querySelectorAll('[data-popover-content])');</script>

<button data-position='left' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is left positioned.</p></div>'>Left popover</button>
<button data-position='left-start' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is left start positioned.</p></div>'>Left start popover</button>
<button data-position='left-end' data-popover-content='<div class="-px--2 -py--1 -s--3"><h5>Popover positioning</h5><p>This popover is left end positioned.</p></div>'>Left end popover</button>
<script>chi.popover(document.querySelectorAll('[data-popover-content])');</script>

Options

This component accepts options to configure its behavior.

Option	Default	Description
`animate`	`true`	Enables animation on popover display and hide.
`content`	`null`	Lets the developer include the popover content programmatically on the creation phase.
`position`	`'top'`	Where the popover will be located by default. If there is no free space in that position, the popover will try to flip the position to the opposite side. `data-position` takes precedence over this configuration option.
`arrow`	`true`	If set to true, an arrow will appear between the popover and the trigger element.
`parent`	`null`	If an element is provided as parent, the popover will be attached visually to that element. If not, the popover will be attached to the trigger used in instantiation.
`classes`	`[]`	Lets the developer add any classes to the popover element in the creation phase.
`trigger`	`'click'`	Available options are `click` or `manual`. Use click to attach the toggle action to the trigger element, and manual for develop a custom solution.
`target`	`'null'`	If you specify a target, the Popover will be build over that Element. You can specify the xpath selector of the element or the element itself.
`preventAutoHide`	`false`	Set `preventAutoHide` to `true` to prevent hidding the popover when clicking outside the popover.

Methods

.setContent()

Use this method to change the content of the popover. It discards any previously attached content, so any resources attached to the content should be removed to prevent memory leaks. This method accepts a string or an HTML DOM Element as a parameter.

<button id='popover-2' class="a-btn" data-popover-content='<div class="-px--2 -py--1 -s--3">Foo</div>'>Popover</button>
<script>
  var popover = chi.popover(document.getElementById('popover-2'));
  popover.setContent('<div class="-px--2 -py--1 -s--3">Bar</div>');
</script>

.show(), .hide(), .toggle()

Use this methods to control popover visibility.

<button id='popover-3' class="a-btn -mr--2" data-popover-content='<div class="-px--2 -py--1 -s--3">Foo</div>'>Manual popover</button>
<button id='show-popover-3' class="a-btn -mr--2">Show</button>
<button id='hide-popover-3' class="a-btn -mr--2">Hide</button>
<button id='toggle-popover-3' class="a-btn -mr--2">Toggle</button>
<script>
  var popover = chi.popover(
    document.getElementById('popover-3'),
    {
      trigger: 'manual',
      preventAutoHide: true
    }
  );
  document.getElementById('show-popover-3').addEventListener('click', function(e) {
    popover.show()
  });
  document.getElementById('hide-popover-3').addEventListener('click', function(e) {
    popover.hide()
  });
  document.getElementById('toggle-popover-3').addEventListener('click', function(e) {
    popover.toggle()
  });
</script>

Events

chi.popover.show

The element the popover is attached to (usually a button), dispatches this event when the popover is to be shown.

chi.popover.hide

The element the popover is attached to (usually a button), dispatches this event when the popover is to be hidden.

Preventing memory leaks

Popover components have a dispose function to free all resources attached to the element, such as event listeners and object data. You must call this method when you want to remove the component.

var elem = document.getElementById('popover');
var popover = chi.popover(elem);
// do stuff
popover.dispose();

TipIt is safe to call the popover method more than once, as it will return any previously created popover component associated to the trigger.

var elem = document.getElementById('popover-1');
var popover = chi.popover(elem);
var elem2 = document.getElementById('popover-1');
var popover2 = chi.popover(elem2);
popover === popover2; // returns true

popover.dispose(); // Only have to do it once.