I've created a unique flexbox calendar layout with CSS tooltips that appear on hover. One challenge I'm facing is vertically aligning these tooltips with the corresponding calendar dates effectively.
Although I prefer to achieve this alignment using CSS, my attempts have been unsuccessful so far. Currently, I have set a left value of 4em and calculated the top value dynamically in jQuery due to the varying height of the tooltips. Despite this approach, the vertical alignment of the tooltips isn't perfect, and I can't figure out the reason behind it.
Below is the snippet of my jQuery function:
$('.cal-tooltip').each(function() {
var calTooltipHeight = $(this).outerHeight(true) / 2;
$(this).css('top', -calTooltipHeight);
});
CSS Styles:
.tooltip {
position: absolute;
z-index: 1;
background-color: white;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
.tooltip:after {
content: '';
position: absolute;
width: 0;
height: 0;
margin-left: -15px;
margin-top: -15px;
top: 50%;
box-sizing: border-box;
border: 15px solid black;
border-color: transparent transparent white white;
transform-origin: 50% 50%;
box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}
/* Additional CSS styles omitted for brevity */
#event-calendar .cal-tooltip {
display: none;
width: 20em;
cursor: auto;
}
/* Additional CSS classes and styling rules excluded */
For a live demonstration, visit: CodePen