Popovers are very effective way of showing more information about a topic/link or even a description of a photo when a user hovers over it. Also we can do more actions for a hover, so minimizing the space required to do the same. These days Popovers are becoming very popular among the websites. Implementation of a popover is relatively easy as shown below. This tutorial is a non-responsive. ie., if you hover over the link/image, the popover is shown always below and the arrow points always upwards. In my next tutorial i will try to provide with a responsive. ie., based on the size of the window, it should show either above or below with corresponding arrow shown to the hover image/link.
[sc:demobuttons demolink=”http://demo.techglimpse.com/popover/” boxlink=”https://www.box.com/s/m8kmd75rufl7elpr361k”]
Step 1: In the head section of your html template, include the below CSS Code. Here i have given only the important classes. for complete, please download.
<style type=”text/css”>
#hover {
padding: 10px;
position: absolute;
width:50px;
float:left;
}
#hover:hover {
width:180px;
cursor:pointer;
float:left;
}
#popup {
opacity: 0;
position: relative;
top: 60px;
background: #f7f7f7;
border: 1px solid transparent;
border-radius: 0px;
height: 0px;
-moz-box-shadow:2px 3px 6px #888;
-webkit-box-shadow: 2px 3px 6px #888;
box-shadow: 2px 3px 6px #888;
}#hover:hover #popup {
padding: 12px 12px;
height: auto;
opacity: 1;
border: 1px solid #eeeeee;
}.popup-arrow-border {
border-color: transparent transparent #666666 transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-15%;
left:15px;
}
.popup-arrow {
border-color: transparent transparent #f7f7f7 transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-15%;
left:15px;
}
.user-logo {
display: block;
float:left;
position:absolute;
}
.user-name {
left:70px;
position: absolute;
font-weight:bolder;
font-family:sans-serif;
font-size:1em;
}
a {
text-decoration:none;
}
</style>
.popup-arrow and .popup-arrow-border are the two classes used to create the arrow pointing to the hover content.
Step 2: Create an image/text on hover shows the popover with more contents. Contents can be pulled from the databases, standard information etc., Add the below code in the body section of your html templates.
<div id=”hover”>
<div class=”user-logo”>
<a href=”#”><img src=”angry-birds-icon-logo.png” alt=”facebook user icon” width=”50px” height=”50px” /></a>
</div><div class=”user-name”>
<a href=”#”>Techglimpse.com</a>
</div>
<div id=”popup”>
<img src=”facebook-popover.png” />
<div class=”popup-arrow-border”></div>
<div class=”popup-arrow”></div>
</div>
</div>
Now enjoy the facebook like popover using simple css and no javascript/jquery.
[sc:demobuttons demolink=”http://demo.techglimpse.com/popover/” boxlink=”https://www.box.com/s/m8kmd75rufl7elpr361k”]
