# Tooltip for everything

**URL:** <https://community.glideapps.com/t/tooltip-for-everything/57649>\
**Category:** Feature Requests\
**Created:** [February 8, 2023, 8:28am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649 "2023-02-08T08:28:48Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![rezmeplx](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rezmeplx/32/53827_2.png) [@rezmeplx](https://community.glideapps.com/u/rezmeplx)\
**Post date:** [February 8, 2023, 8:28am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/1 "2023-02-08T08:28:48Z")

</div>

I know we have hint element but its too big  
Can we have tooltip for everything? An option to add tooltip in every element would be great

---

<div class="post-metadata">

**Author:** ![tristan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tristan/32/78911_2.png) [@tristan](https://community.glideapps.com/u/tristan)\
**Post date:** [February 9, 2023, 1:54am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/2 "2023-02-09T01:54:14Z")

</div>

Could you share the use-case you have for this?

---

<div class="post-metadata">

**Author:** ![rezmeplx](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rezmeplx/32/53827_2.png) [@rezmeplx](https://community.glideapps.com/u/rezmeplx)\
**Post date:** [February 9, 2023, 3:16am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/3 "2023-02-09T03:16:14Z")

</div>

for example, in Big number element we can put two numbers one big one small and the title. itd be great to have a small i or ? icon within the box so that I can explain what do numbers mean

---

<div class="post-metadata">

**Author:** ![Flowcode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/flowcode/32/64316_2.png) [@Flowcode](https://community.glideapps.com/u/Flowcode)\
**Post date:** [July 24, 2023, 1:49pm UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/4 "2023-07-24T13:49:22Z")

</div>

We also need tooltips for our customers.  
Glide software is already very easy to use but adding tooltips would make the software really self-explanatory for teams. Now I often created Loom videos for software for our customers. But as the software changes, I always have to change te video’s. If I could a tooltip to certain titles, buttons etc, I would be able to give explanations about functions much more finegrained. And in a cleaner way than having to add explanations as ‘footnote text’ (the current best way to add info)

---

<div class="post-metadata">

**Author:** ![HouseHippo](https://avatars.discourse-cdn.com/v4/letter/h/6f9a4e/32.png) [@HouseHippo](https://community.glideapps.com/u/HouseHippo)\
**Post date:** [February 19, 2024, 4:39am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/5 "2024-02-19T04:39:06Z")

</div>

Literally anything and everything involving text, headers, etc. The exact same use cases as Glide themselves uses in their own UX (example below).

Tooltips help us condense form headings, or any other inputs to save screen space. While giving the “tip” option to explain more deeply if something wasn’t quite clear in our wording to the user.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aadca417dfc8774f886cf741c7ee8310c5240b53.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 19, 2024, 4:52am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/6 "2024-02-19T04:52:50Z")

</div>

Sometimes I’ll use an action row component to toggle a visibility condition. It works, but it’s clunky. A native Tooltip option would be so much better…

![CleanShot 2024-02-19 at 12.49.56](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/f/df1d368af5bb4221ee4b0c2ebd7337ef99a0e4c3.gif)

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 19, 2024, 5:21am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/7 "2024-02-19T05:21:18Z")

</div>

Actually that’s elegantly done

---

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [February 19, 2024, 8:53am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/8 "2024-02-19T08:53:57Z")

</div>

I handle this with CSS.

![1708332810478](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/b/3b0f122cc81e9e40daf59841c3669b8ee5bbdab5.gif)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 19, 2024, 9:01am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/9 "2024-02-19T09:01:44Z")

</div>

That’s very nice - do you mind sharing the CSS?

---

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [February 19, 2024, 9:07am UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/10 "2024-02-19T09:07:58Z")

</div>

I made a few adjustments by sharing the code of [https://uiverse.io/](https://uiverse.io/), it made my app look more lively.

for Rich text

```auto
<div class="parent-container">
<div class="tooltip-container">
  <span class="tooltip">Select</span>
  <span class="text">Menu Function 👆</span>
  <span>Functions 👇</span>
</div>
</div>

```

for CSS

```auto
.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip-container {
  --background: #333333;
  --color: #e8e8e8;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 14px;
  font-weight: 600;
  color: black;
  padding: 0.7em 1.8em;
  border-radius: 8px;
  text-transform: uppercase;
  height: 35px;
  width: 180px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color);
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-origin: -100%;
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.tooltip-container span:last-child {
  position: absolute;
  top: 0%;
  left: 100%;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 1;
  background-color: var(--background);
  z-index: -1;
  border: 2px solid var(--background);
  transform: scale(0);
  transform-origin: 0;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
  display: grid;
  place-items: center;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.1em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--background);
  z-index: -1;
  border-radius: 8px;
  scale: 0;
  transform-origin: 0 0;
  text-transform: capitalize;
  font-weight: 400;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
}

.tooltip::before {
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.3em solid var(--background);
}

.tooltip-container:hover .tooltip {
  top: -100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  scale: 1;
  animation: shake 0.5s ease-in-out both;
}

.tooltip-container:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  color: white;
  border-color: transparent;
}

.tooltip-container:hover span:last-child {
  transform: scale(1);
  left: 0;
}

.tooltip-container:hover .text {
  opacity: 0;
  top: 0%;
  left: 100%;
  transform: scale(0);
}

@keyframes shake {
  0% {
    rotate: 0;
  }

  25% {
    rotate: 7deg;
  }

  50% {
    rotate: -7deg;
  }

  75% {
    rotate: 1deg;
  }

  100% {
    rotate: 0;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Sean\_Page](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sean_page/32/77424_2.png) [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\
**Post date:** [October 22, 2025, 2:40pm UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/11 "2025-10-22T14:40:34Z")

</div>

This should have like 10,000 votes!

---

<div class="post-metadata">

**Author:** ![Myles\_Chaput](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/myles_chaput/32/62176_2.png) [@Myles\_Chaput](https://community.glideapps.com/u/Myles_Chaput)\
**Post date:** [October 22, 2025, 9:04pm UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/12 "2025-10-22T21:04:36Z")

</div>

replying to this thread just to track the fact that there is some good CSS in here!

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [October 22, 2025, 9:57pm UTC](https://community.glideapps.com/t/tooltip-for-everything/57649/13 "2025-10-22T21:57:09Z")

</div>

You can bookmark posts by using the bookmark feature at the bottom of each post.