Tooltip for everything

Feature Requests
1

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

2 Likes
2

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

3

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

3 Likes
4

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)

2 Likes
5

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
image541×547 27.7 KB

6 Likes
6

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

7 Likes
7

Actually that’s elegantly done

8

I handle this with CSS.

1708332810478

2 Likes
9

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

10

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

for Rich text

<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

.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;
  }
}
6 Likes