Within my Vue.js component, I am attempting to craft a custom tooltip text that consists of multiple lines.
<div class="toolTip">
Shift ('+i+')
</div>
<div class="hide">
<div class="w-full">
'+names[group]+'
</div>
<div class="w-full">
<span class="material-icons">calendar_today</span>03 Mar 2023 - 04 Mar 2023
</div>
<div class="w-full">
<span class="material-icons">schedule</span>
08:00 - 18:00
</div>
<div class="w-full">
<span class="material-icons">pending_actions</span>
Door-to-door travel time: 6 hours
</div>
</div>
The above code generates the following output:
https://i.stack.imgur.com/uaNIm.png
However, my intention is to have each line displayed on a separate row...
Below is the CSS I am utilizing for this feature:
.hide {
display: none;
}
.toolTip:hover + .hide {
display: flex;
padding: 16px;
background: rgba(9, 30, 66, 0.9);
border-radius: 4px;
position: relative;
margin-top: -140px;
text-align: left;
line-height: 20px;
font-weight: 400;
font-size: 14px;
}
It's worth mentioning that I am integrating Tailwind CSS in my application.