Currently, I am developing a unique custom tooltip that utilizes the position: fixed property along with dynamic values for top and left to enable it to follow the mouse cursor. This tooltip features a rather intricate layout which has been constructed using flexbox. However, I am encountering an issue specifically within IE11 (although it typically supports flexbox seamlessly when employing autoprefixer). The problem arises from the width of the tooltip inexplicably collapsing as if it lacks any content.
To further investigate this matter, I have created a Codepen demonstration where I have removed all unnecessary details related to my implementation and retained only the fundamental Bootstrap layout and CSS styles. You can view this in action here https://codepen.io/ryangiglio/pen/xajLJr. Here is the simplified code:
HTML
<!-- Main content -->
<div class="container-fluid">
<div class="row">
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
</div>
</div>
<!-- Tooltip content -->
<div class="custom-tooltip">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
Tooltip Title
</div>
</div>
<div class="row">
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
<div class="col-4 text-center">
Column
</div>
</div>
</div>
</div>
CSS
.custom-tooltip {
position: fixed;
top: 50px;
left: 50px;
background: white;
box-shadow: 0 0 5px 1px black;
}
This represents how the design appears in Chrome
https://i.sstatic.net/mJAC2.png
Conversely, this depicts how it appears in IE11