jQuery Tooltip On Click Open And Hide

Uncategorized / Leave a Comment

jquery tooltip on click open and hide on click outside. The jQuery modal is useful when we want to show more info by clicking on a button or text. Here we have used jQuery to open and hide a div when the user clicks outside of the modal box.

It is the best solution to create any type of popup like a full-screen overlay search box, image gallery modal, collection of social media buttons, or quick view screen.

HTML

<button class="tooltip-btn">Click Me</button>

<div class="tooltip-outer">
	<div class="tooltip">
		<h2>What is Lorem Ipsum?</h2>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
		<h2>Why do we use it?</h2>
		<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
	</div>
</div>

CSS

* {
	font-family: arial;
	box-sizing: border-box;
}
button.tooltip-btn {
    margin: 100px auto;
    display: block;
    background-color: #F44336;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 4px;
}
button:focus {
	outline: none;
}
.tooltip-outer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 999;
	display: none;
}
.tooltip-outer.active {
	display: flex;  
}
.tooltip {
    width: 60%;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
}

JavaScript

$(document).ready(function() {
	$('.tooltip-btn').on('click', function(e) {
		if(e.target == $(this)[0]) {
		$('.tooltip-outer').addClass('active');
		}
	});

	$('.tooltip-outer').on('click', function(e) {
		if(e.target == $(this)[0]) {
		$(this).removeClass('active');
		}
	});
});

Other Snippets