Hovercard is a small but a very handy feature. It’s a little pop-up box that display quick information about a page or person when user hover cursor over the label, link, person’s, page’s or any html element of their choice. A hovercard is very useful to display person brief profile, book author and price, loading related information with Ajax, editing in place, and much more.

Since the responsive design is so in demand, most of designers started developing website using front-end framework such as  bootstrap , the most popular HTML, CSS, and JS framework for developing responsive websites. Keeping this in mind, we have designed a simple and easy tutorial to build Hovercard with Twitter bootstrap with demos to keep everything responsive.

Hovercard with Twitter Bootstrap

 

Demo Download Bootstrap Hovercard

Let’s Start:

First of all, you need to include jQuery and bootsrap library files at the bottom of HTML document, just before the closing bodytag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></  script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></  script>
<script src="custom_hovercard.js"></  script>

You also need to include custom Hovercard css inside head tag.

<link href="hovercard.css" rel="stylesheet">

HTML to Create Point To Hover:

This HTML will be used to create a point where user will hover over to display the hovercard. For this example we use a class “basic-hovercard” to define the hover point.

<span>
<a href="" data-toggle="popover" class="basic-hovercard" data-placement="bottom"><strong>Mark Otto</strong></a>
</span>

HTML For Hovercard:

The HTML will be used to create a hovercard. When you will hover over to display the hovercard, the below HTML will display as hovercard with details.

<div class="basic-content" style="display: none;">
	<div class="hover-card-details left-align">
		<div class="hover-card-header left-align">
			<div class="hover-card-pic left-align">
				<span class="image-wrapper medium">
					<a href="" class="left-align" style="background:url(https://avatars1.githubusercontent.com/u/98681?v=3&s=460)"></a>
				</ span>
			</div>
			<h4 class="left-align"><a href="#">Mark Otto</a></h4>
Mark Otto is a designer living and working in San Francisco. Originally from Wisconsin. At Twitter, He also created the popular open source front-end toolkit Bootstrap with @fat.		
		</div>
		<ul class="hover-card-content left-align">
			<li class="right-aligned">
				<span class="desc">Favorites</span><span class="content">60,56</span>
			</li>
			<li class="right-aligned">
				<span class="desc">Followers</span><span class="content">40.9k</span>
			</li>
			<li class="right-aligned">
				<span class="desc">Following</span>
				<span class="content">
				<a href="" data-toggle="tooltip">101</a>
				</span>
			</li>
			<li class="right-aligned">
				<span class="desc">Tweets</span>
				<span class="content"><a href="#">24k</a></span>
			</li>
		</ul>
	</div> 
	<span class="hover-card-options-wrapper">
		<span class="hover-card-options">
			<ul>
				<li><a data-toggle="modal" data-backdrop="true" data-keyboard="true" href="https://twitter.com/mdo"><i class="glyphicon glyphicon-envelope"></i>@mdo</a></li>
			</ul>
		</span>
	</span>   
</div>

The Javascript:

You need to give your Hovercard HTML class to open hovercard HTML as popup.

$(document).ready(function(){
	// Basic hovercard
	$('.basic-hovercard').popover({ 
		html : true,
		trigger: 'manual',
		placement: function (context, source) {
			var get_position = $(source).position();
			if (get_position.left > 515) {
				return "left";
			}
			if (get_position.left < 515) {
				return "right";
			}
			if (get_position.top < 110){
				return "bottom";
			}
			return "top";
		},
		content: function() {
			return $('.basic-content').html();   
		}
	}).on("click", function(e) {
		e.preventDefault();
	}).on("mouseenter", function() {
		var _this = this;
		$(this).popover("show");
		$(this).siblings(".popover").on("mouseleave", function() {
			$(_this).popover('hide');
		});
	}).on("mouseleave", function() {
		var _this = this;
		setTimeout(function() {
			if (!$(".popover:hover").length) {
				$(_this).popover("hide")
			}
		}, 100);
	});
});

 

Demo Download Bootstrap Hovercard

 

email

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Quote | Web Design Estimate
Categories

Related Post

Archives
May 2017
S M T W T F S
« May    
 123456
78910111213
14151617181920
21222324252627
28293031  
Pond Calculator

Select Pond Shape

Powered by Laguna Pond Supplies

Our Calculator Estimates The Following Size For Your Pond Liner:

Pond Volume: 0 US Gallons | Liters: 0 | Imperial Gallons: 0

Estimated Pond Liner Size: 0 X 0 Feet

Note: Pond liner size estimate includes a 1 foot overlap on all sides.

Powered by Laguna Pond Supplies