Text Popover
Huro popovers are a custom implementation of WebUIPopover. You
don't have to write any javascript code, just use the popover
attributes to set your content. The text popover needs the
data-toggle="popover" to be initilized properly.
Check the code example to review the supported attributes.You
can check the plugin documentation on
Github. You can also access the javascript code by visiting the
assets/js/popover.js file.
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Hover Popover"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam tum adesse, cum dolor omnis absit"
data-pop-position="top">
Hover Me
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="click"
data-pop-width="220"
data-pop-title="Click Popover"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam tum adesse, cum dolor omnis absit"
data-pop-position="top">
Click Me
</button>
Popover Position
Huro popovers support multiple positionning options. Not that auto positionning is verry reliable and performant. Here are all the possible values: auto, top, right, bottom, left,top-right, top-left, bottom-right, bottom-left, auto-top, auto-right, auto-bottom, auto-left, horizontal, and vertical.
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Left"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="left">
Left
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Top Left"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top-left">
Top Left
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Top"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top">
Top
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Top Right"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top-right">
Top Right
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Right"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="right">
Right
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Bottom Right"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="bottom-right">
Bottom Right
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Bottom"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="bottom">
Bottom
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Bottom Left"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="bottom-left">
Bottom Left
</button>
Header Image
You can use the extra attribute
data-pop-avatar if you want to pass an extra
avatar image url inside the popover header. You can access the
javascript code by visiting the
assets/js/popover.js file.
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Alejandro B."
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top"
data-pop-avatar="https://via.placeholder.com/150x150">
Hover Me
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="click"
data-pop-width="220"
data-pop-title="Alice C."
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top"
data-pop-avatar="https://via.placeholder.com/150x150">
Click Me
</button>
Header Icon
You can use the extra attributes
data-pop-icon and data-pop-iconbg if
you want to pass an extra icon box inside the popover header.
You can access the javascript code by visiting the
assets/js/popover.js file.
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Hover Popover"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top"
data-pop-icon="lnil lnil-crown-alt-1"
data-pop-iconbg="primary">
Primary
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Hover Popover"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top"
data-pop-icon="lnil lnil-crown-alt-1"
data-pop-iconbg="info">
Info
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Hover Popover"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top"
data-pop-icon="lnil lnil-crown-alt-1"
data-pop-iconbg="orange">
Orange
</button>
<button class="button h-button is-dark-outlined" data-toggle="popover"
data-pop-mode="hover"
data-pop-width="220"
data-pop-title="Hover Popover"
data-pop-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
data-pop-position="top"
data-pop-icon="lnil lnil-crown-alt-1"
data-pop-iconbg="green">
Green
</button>
User Popover
WebUIPopover can be used to create powerful rich popovers that
can work very well with asynchronous data. The only caveat is
that it is jQuery based. You can check the plugin
documentation on
Github. You can also access the javascript code by visiting the
assets/js/popover.js file.
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="" data-user-popover="0">
</div>