Hello,
my original idea was to create tooltips for the floating buttons.
Because despite many icons available, it is not always easy for some users.
Except that I forgot that it doesn’t work with a mobile , so I made a version with additional text.
Well, it still works in desktop mode.
This is not ideal if you are using visibility. But hey in the meantime, it can still be used.
<pre><span><style>
.fab-target > :hover:nth-child(1):after {
content: "this is button 1";
font-family: Arial;
position: absolute;
top: 0;
right:10px;
width: 110px;
height: 1.25rem;
background-color: yellow;
color: black;
opacity:0.8;
}
.fab-target > :hover:nth-child(2):after {
content: "this is button 2";
font-family: Arial;
position: absolute;
top: 0;
right:10px;
width: 110px;
height: 1.25rem;
background-color: yellow;
color: black;
}
.fab-target > :nth-child(3):after {
content: "this is button 3";
font-family: Arial;
position: absolute;
top: 17px;
right:40px;
width: 110px;
height: 1.25rem;
background-color: #FF5722;
color: white;
}
</style></span></pre>