### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# WebUI Popover

### 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>