ui-popup

Usage

ui-popup needs to be placed as an immedate sibbling of the element on which it will be activated.

<i class="circular heart icon link"></i>
<ui-popup content="Just a heart." position="right center" variation="inverted"></ui-popup>

Heart me!

$toggle()

$show()

$hide()

$isVisible()

$remove()

title {String}

The title of the popup. If not specified, it will not take any place in the DOM(ie display="none")

content {String}

The content of the popup as a string. If you need to display a custom block of HTML, you can always do the following

<ui-popup attributes...>
    <div class="content"> Your HTML here ... </div>
</ui-popup>

on {String} Default: 'hover'

The event on which the popup will appear. Can be 'click' or 'hover'

position {String} Default: 'top right'

The position where the popup will be displayed on the activating element. Possible options: 'top left', 'top center', 'top right', 'right center', 'bottom right', 'bottom center', 'bottom left', 'left center'

variation {String}

There is different variations of a popup. You can see all the options here:

Variations

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.