Floating Buttons, Tooltip, CSS

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 :face_with_raised_eyebrow: :neutral_face: :thinking:, 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>
7 Likes

Cool, but as I said here :upside_down_face:

Hello @Lucas_Pires

Yes, I completely agree with you.
But unfortunately sometimes some users need a little help or got used to having help.

1 Like

I faced and fought same problems on my APP months ago.

If we could know the object’s coordinates (position) dynamically on screen, the tooltip will look much better and we’ll save more time.

I wasted too much time debugging CSS code!

Saludos @Manu.n

3 Likes

Great. Thanks

This CSS is no longer necessary :slight_smile:

It is possible to Close this discussion !!!