I have implemented buttons with a hover effect that displays a span on top of the button when hovered.
https://i.sstatic.net/YazEE.gif
Although it works well, the appearance gets distorted when the screen width changes:
https://i.sstatic.net/zaWoX.gif
Here are the elements involved:
<div className='buttons'>
<button
className={editor.isActive('bold') ? 'is-active' : 'is-inactive'}
>
<strong>N</strong>
<span className='popup'>Negrita (Ctrl+B)</span>
</button>
<button
className={editor.isActive('italic') ? 'is-active' : 'is-inactive'}
>
<em>C</em>
<span className='popup'>Cursiva (Ctrl+I)</span>
</button>
<button
className={editor.isActive('strike') ? 'is-active' : 'is-inactive'}
>
<s>T</s>
<span className='popup'>Tachado (Ctrl+Shift+X)</span>
</button>
... (and so on)
</div>
This is the SCSS styling:
.buttons button {
position: relative;
height: 29.19px;
color: #000;
border: 1px solid black;
border-radius: 0.3rem;
margin: 0.2rem !important;
padding: 0.1rem 0.4rem !important;
background: white;
accent-color: black;
font-weight: 500;
}
button .popup {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
margin-left: -60px;
}
button .popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
button:hover .popup {
visibility: visible;
}
Desired Outcome
I have decided to implement a horizontal scroll for this issue. However, due to the absolute positioning of the span based on the button, I am struggling to keep the span on top of the hovered button while enabling horizontal scrolling.
Update 1
After adding a scroll, this is the current result:
https://i.sstatic.net/5W9SV.gif
As shown in the GIF, the scroll works properly but the spans are getting 'covered'. Is there a solution to rectify this?
The following snippet was added to the code:
.buttons {
position: relative;
overflow-x: scroll;
white-space: nowrap;
}