I am currently working on implementing tooltips for items within a scrollable list. My goals for the tooltips are as follows:
- Ensure they are visible outside and not restricted by the scroll area
- Appear immediately after the corresponding item
- Be detached from the content of the item containing them
The structure in markup is as shown below:
<ul>
<li>
<div class='option'>Option</div>
<div class='tooltip'><h4>Tooltip</h4> Tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip.</div>
</li>
<!-- repeat the above li structure fourteen more times -->
</ul>
A sample CSS snippet includes:
ul{
list-style-type:none;
border:thin solid gray;
width:80px;
height:200px;
overflow:auto;
}
.tooltip {
display:none;
border:thin solid black;
box-shadow: 2px 2px 2px #aaa;
background-color:white;
z-index:10000;
padding:3px;
width:150px;
position:absolute;
}
.option:hover + .tooltip{
display:block;
}
You can try out a demo of the existing implementation here: http://plnkr.co/edit/vhKquqeswyDwvDQNP12G?p=preview
When using relative positioning for the tooltip, it shows up correctly but gets clipped by the scroll area (and remains part of the content).
Alternatively, with absolute positioning, the tooltip appears outside the scroll area, but its placement becomes incorrect upon scrolling away from the top of the ul element.
To address these issues, applying absolute positioning along with a relatively positioned wrapper to align the tooltip with the list item ensures proper positioning even after scrolling, detachment from the item's content, but may result in clipping by the list area.
Is there a way to achieve all three desired behaviors using CSS?