Tooltips

by cintia_rodrigues

HTML

<div class="wrapper">
	<div class="form-block">
		<div class="input-wrapper">
			<input type="text" placeholder="Name">
		</div>
		<div class="icon-wrapper">
			<div class="icon jq_modal"> ? </div>
			<div class="form-modal right">
      	 <div class="modal-overlay"></div>
         <div class="modal-content">
         		<div class="modal-close"> x </div>
            <div class="modal-text">
            		<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
						</div>
          </div>
       </div>
		</div>
	</div>
	<div class="form-block" style="width: 200px;">
		<div class="input-wrapper">
			<input type="text" placeholder="Name">
		</div>
		<div class="icon-wrapper">
			<div class="icon jq_modal"> ? </div>
			<div class="form-modal left">
      	 <div class="modal-overlay"></div>
         <div class="modal-content">
         		<div class="modal-close"> x </div>
            <div class="modal-text">
            		<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
						</div>
          </div>
       </div>
		</div>
	</div>
	<div class="form-block">
		<div class="input-wrapper">
			<input type="text" placeholder="Name">
		</div>
		<div class="icon-wrapper">
			<div class="icon jq_modal"> ? </div>
			<div class="form-modal top">
      	 <div class="modal-overlay"></div>
         <div class="modal-content">
         		<div class="modal-close"> x </div>
            <div class="modal-text">
            		<p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
						</div>
          </div>
       </div>
		</div>
	</div>
</div>

SCSS

$color-selected: #68EFAD;
$input-height: 40px;
$input-btn-width: 30px;
$modal-transition-time: .5s;

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

.wrapper{
	width: 100%;
	font-size: 0;
	margin-top: 50px; //Retirar
	padding: 10px;
}
.form-block{
	position: relative;
	width: 100%;	
	margin: 10px 0;
	
	.input-wrapper{
		width: calc(100% - #{$input-btn-width});
		height: $input-height;
		display: inline-block;
		vertical-align: middle;
		font-size: 14px;
		
		input{			
			width: 100%;
			height: 100%;
			padding: 10px;
			border-radius: 5px 0 0 5px;
			border: 1px solid #aaa;
		}
	}
	
	.icon-wrapper{
		width: $input-btn-width;
		height: $input-height;
		display: inline-block;
		vertical-align: middle;
		font-size: 14px;
		
		.icon{
			width: 100%;
			height: 100%;
			line-height: $input-height;
			text-align: center;
			border-radius: 0 5px 5px 0;
			color: #fff;
			cursor: pointer;
			background: #aaa;
						
			&:hover{
				background: #ccc;
			}
			
			&.selected{
				background: $color-selected;
			}
		}
	}	
}

.form-modal{
	position: absolute;
	width: 250px;
	opacity: 0;
	visibility: hidden;	
	
	transition: $modal-transition-time opacity,
							$modal-transition-time visibility,
							$modal-transition-time margin;							
	
	&.selected{
		opacity: 1;
		visibility: visible;
		margin-bottom: 0;
	}
	
	&.top{
		right: 0;
		bottom: $input-height + 20px;
		margin-bottom: -20px;
		.modal-content:after{
        top: 100%;
        right: $input-btn-width/2;
        border-top-color: #fff;
        border-top-color: rgba(255,255,255,.9);
			}
			&.selected{
			  margin-bottom: 0;
			}
	}
	
	&.right{
		right: $input-btn-width + 20px;
		top: 0;
		margin-right: -20px;
		.modal-content:after{
        top: $input-btn-width/2;
        left:100%;
        border-left-color: #fff;
        border-left-color: rgba(255,255,255,.9);
			}
			&.selected{
			  margin-right: 0;
			}
	}
	
	&.left{
		left: calc(100% + 20px);
		top: 0;
		margin-left:...

JavaScript

function setModal() {
	$(".jq_modal").each(function () {
		var infoBtn = $(this);

		var modal = $(this).next(".form-modal");
		var modalContent = modal.find(".modal-content");
		var close = modal.find(".modal-close");
		var overlay = modal.find(".modal-overlay");
		
		var windowHeight = $(window).height();
		var modalHeight = modalContent.height();
		var top = (windowHeight - modalHeight) / 2;

		$(this).click(function () {
		
			$(this).toggleClass("selected");
			modal.toggleClass("selected");
			overlay.toggleClass("visible");
			$(".form-modal").not(modal).removeClass("selected");
			$(".icon").not(this).removeClass("selected");

			if (window.innerWidth < 500) {
				modal.css("top", top);
			}
		});

		close.click(function () {
			modal.removeClass("selected");
			infoBtn.removeClass("selected");
			overlay.toggleClass("visible");
		});

		overlay.click(function () {
			modal.removeClass("selected");
			infoBtn.removeClass("selected");
			overlay.toggleClass("visible");
		});
	});
}
setModal();