WebUI popover

by suhail

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css">
<script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script>
<div id="page">

  <div class="custommessages_email">
    <div style="float:left;font-weight:bold">Name of field</div>
    <div style="float:right">
      <span id="popoverTrigger">
        Click me!
      </span>
    </div>
    <br/>
    <input type="text" style="width: 100%" />

  </div>




</div>

<div id="popoverContent" style="display:none">
  <div class="rotateme">

    <video controls>
      <source src="http://52.230.22.0:8080/TelehealthImages/01016690_2017_08_25_11_00_53.mp4" type=video/mp4>

    </video>
  </div>
</div>

CSS

#page {
  padding: 100px;
  border: 1px dashed grey;
}

#popoverTrigger {
  border: 1px solid black;
}

JavaScript

//$('#popoverTrigger').webuiPopover({url:'#popoverContent', placement: 'top'});
$('#popoverTrigger').webuiPopover({
  url: '#popoverContent',
  placement: 'left-bottom'
});