Looking to create a custom tooltip without relying on plugins. The goal is to align the tooltip vertically to the right of the triggering element, in this case, an input field.
The current setup (see Fiddle demo) achieves the desired layout and content for the tooltip, but it lacks the ability to position it correctly on the right side of the input field (currently appearing in the center of the screen).
$(document).ready(function() {
$('.tooltipClose').on('click', function() {
$(this).closest('div.tooltip').removeClass('tooltipShow');
});
$('.triggerTooltip').on('click', function() {
$(this).next('div.tooltip').addClass('tooltipShow');
});
});.tooltip {
-moz-transition: opacity 400ms ease-in;
-webkit-transition: opacity 400ms ease-in;
bottom: 0;
font-family: Helvetica, Arial, Verdana, sans-serif;
left: 0;
right: 0;
filter: alpha(opacity=0);
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
transition: opacity 400ms ease-in;
z-index: 99999;
}
.tooltipClose {
background: #028dca;
border-radius: 12px;
box-shadow: 2px 2px 3px #666;
color: #fff;
font-weight: bold;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
text-decoration: none;
top: -12px;
vertical-align: middle;
width: 24px;
}
.tooltipClose:hover {
background: #00507e;
}
.tooltipFooter,
.tooltipHeader {
border-bottom: 2px solid #ccc;
font-size: 20px;
font-weight: bold;
margin: 0;
padding: 8px 0;
vertical-align: middle;
}
.tooltipShow {
filter: alpha(opacity=100);
opacity: 1;
pointer-events: auto;
}
.tooltip > div {
background: #fff;
border: 3px solid #028dca;
border-radius: 10px;
margin: 10% auto;
padding: 8px 16px;
position: relative;
width: 200px;
}
.tooltip > div:after {
border-bottom: 12px solid transparent;
border-right: 12px solid #028dca;
border-top: 12px solid transparent;
content: '';
height: 0;
left: 0;
margin: -12px;
position: absolute;
right: 50%;
top: 50%;
width: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- to see tooltip in the demo -->
<div style="height: 200px;"></div>
<input type="text" class="triggerTooltip" />
<div class="tooltip">
<div>
<a href='javascript:void(0);' class='tooltipClose'>X</a>
<p class='tooltipHeader'>Tooltip header</p>
<p class='tooltipBody'>Tooltip content</p>
</div>
</div>Check out the demonstration here:
Fiddle