# Floating Buttons, Tooltip, CSS

**URL:** https://community.glideapps.com/t/floating-buttons-tooltip-css/26814
**Category:** Community Resources
**Created:** [May 15, 2021, 2:37am UTC](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814 "2021-05-15T02:37:36Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 15, 2021, 2:37am UTC](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814/1 "2021-05-15T02:37:36Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/4/146f45dc3aa1aaf36c1e25a26ba30988765bf377.jpeg)

> **[Demo Tooltip](https://tooltip-5429.glideapp.io/)**

```
<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>
```

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [May 15, 2021, 2:45am UTC](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814/2 "2021-05-15T02:45:26Z")

</div>

Cool, but as I said here 🙃

> [@gem UX UI Design Tips](https://community.glideapps.com/t/ux-ui-design-tips/23637/13):
>
> To start our week well upside_down_face Have a great week you who’s reading this!

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 15, 2021, 2:50am UTC](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814/3 "2021-05-15T02:50:26Z")

</div>

Hello @Lucas_Pires

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

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [May 15, 2021, 12:21pm UTC](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814/4 "2021-05-15T12:21:54Z")

</div>

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

> **[Machine Control](https://iiot-v2.glideapp.io)**
>
> Using IIoT Gateway to control machines

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d1d5eccf2e6009f0669e701343f5aa3b69539630.jpeg)

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

---

<div class="post-metadata">

### Author: ![Nadir\_Abdelrahman\_MD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nadir_abdelrahman_md/32/5237_2.png) [@Nadir\_Abdelrahman\_MD](https://community.glideapps.com/u/Nadir_Abdelrahman_MD)
#### Post date: [May 16, 2021, 4:45am UTC](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814/5 "2021-05-16T04:45:30Z")

</div>

Great. Thanks

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [June 30, 2021, 9:17am UTC](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814/6 "2021-06-30T09:17:38Z")

</div>

This CSS is no longer necessary 🙂

> [@new Tooltip, Floating Button](https://community.glideapps.com/t/tooltip-floating-button/28516):
>
> Great, there are “ToolTips” for floating buttons [image]

**It is possible to Close this discussion !!!**