WebUI Popover

      <button class="button h-button is-dark-outlined" data-toggle="popover"
          data-pop-mode="hover"
          data-pop-width="220"
          data-pop-title="نمایش با هاور کردن"
          data-pop-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          data-pop-position="top">
              Click Me
      </button>
      

      <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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          data-pop-position="bottom-left">
              Bottom Left
      </button>
      

      <button class="button h-button is-dark-outlined" data-toggle="popover"
          data-pop-mode="hover"
          data-pop-width="220"
          data-pop-title="الکساندر"
          data-pop-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          data-pop-position="top"
          data-pop-avatar="https://via.placeholder.com/150x150">
هاور کنید      </button>
      
      <button class="button h-button is-dark-outlined" data-toggle="popover"
          data-pop-mode="click"
          data-pop-width="220"
          data-pop-title="آلیس"
          data-pop-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          data-pop-position="top"
          data-pop-avatar="https://via.placeholder.com/150x150">
کلیک کنید
          </button>
      

      <button class="button h-button is-dark-outlined" data-toggle="popover"
          data-pop-mode="hover"
          data-pop-width="220"
          data-pop-title="نمایش با هاور کردن"
          data-pop-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="نمایش با هاور کردن"
          data-pop-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="نمایش با هاور کردن"
          data-pop-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          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="نمایش با هاور کردن"
          data-pop-content="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
          data-pop-position="top"
          data-pop-icon="lnil lnil-crown-alt-1"
          data-pop-iconbg="green">
              Green
      </button>
      

      <div class="h-avatar is-medium">
          <img class="avatar" src="https://via.placeholder.com/150x150" alt="" data-user-popover="0">
      </div>