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>