Demo: https://jsfiddle.net/3ev5t8w3/
A JS, CSS Photon-Plugin for Mini-PopOvers in style of OS X El Capitan.
If you don't include the deafult "photon.css" file, the popups will work but it wouldn't looks nice.
To initialize a target element like a button, a, div or any other tag for a Mini-PopOver, the target element needs a "data-popover" attribute that contains a querySelector for the PopOver-Element.
The PopOver Element is just a DIV construction.
#Documentation
First we had to integrate the "mini-popover.css", the "mini-popover.js" and of course "photon.css":
<link rel="stylesheet" href="photon.css">
<link rel="stylesheet" href="mini-popover.css">
<script src="mini-popover.js"></script>A example for a target element which installs itself with a PopOver Element:
<button class="btn btn-default" data-popover="#popover1">I'm just a button. No one gets hurt.</button>Now, we need to create a DIV construction which can be selected by the querySelector in the data-popover attribute. That means, in this case the new DIV needs the id: "popover1":
<div class="pop-over" id="popover1">
<div class="left" style="background-color: #f00">
<!--You can use a icon or something similar here-->
</div>
<div class="center">
<h1>Current Location</h1>
<h2>5664 Greenridge Road, Castro Valley, California</h2>
</div>
<div class="right">
<button class="btn-info"></button>
</div>
</div>That's it. You can style the three tags "left", "center" and "right" just as you want.
Except the "center" tag you can omit the other tags("left" & "right") just as you want. They aren't required.
You have questions? Ask me :)