How to create a background embedded in html content (template)

Question

I wanted to load the html template into the base of the popover, but I could not find good documentation or a similar solution on the Internet. I just wanted to know the weather that it is possible to have an html template with my controller inside a popover or not. I saw that we just load the content into a popover using the following properties:

<button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button> 

or

 <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button> 

I can somehow enter html using a scope, but with that it's hard to have a controller.

I want to download a popover for my site (which is created using angularJS) when the user clicks on the thumbnail of the video. I want to upload a video preview image and hover over a popover. I want some buttons to follow some actions when clicking on them.

Answer 1

Try this http://codepen.io/Blu-Jay/pen/wMRBLx

 $(document).foundation(); 

 .callout{ text-align:center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script> <link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet"> <div class="row"> <div class="large-8 large-centered columns"> <div class="callout"> <h3>Password Verification</h3> <div class="row"> <div class="small-3 columns"> <label for="right-label" class="text-right">Username</label> </div> <div class="small-9 columns"> <input type="text" id="right-label" placeholder="Username"> </div> </div> <div class="row"> <div class="small-3 columns"> <label for="right-label" class="text-right">Password</label> </div> <div class="small-9 columns"> <input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1"> </div> </div> </div> </div> </div> <div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true"> <strong>Password Must meet to following criteria:</strong> <ul class="no-bullet"> <li style="color:red;">Must be between 4 and 8 characters</li> <li style="color:red;">Must contain capital letters</li> </ul> </div>