Some findings on tooltip

[cyberfly]

Hi just want to report some issues that I found when using o-tooltip

1. The tooltip positioning is not reacted to the edge

For example, the placement is top. Usually Bootstrap tooltip will auto adjust itself to Bottom to avoid the edge

---

2. There is no variable to customize tooltip arrow color. For example the sceenshot show the tooltip arrow is using default border color in my project

So if I customize the tooltip background color inside app.scss

$tooltip-background-color: rgba(0, 0, 0, 0.75);
@import "@oruga-ui/oruga/src/scss/oruga-full.scss";

It will looks like this. Notice that the arrow color doesnt change

Thanks for the hardwork!

[jtommy]

@cyberfly there isn't auto position feature at the moment but in your case you might use append-to-body prop.

The SCSS variable is correct, please check if something override it in your CSS (color attribute in o-tip__arrow)

[dami2]

@cyberfly I had the same issue with the arrow color using oruga with tailwindcss.

Looks like the arrow color is affected by the border-top-color property which is in fact modified by tailwind.

To fix it, I had to set it manually on my overrides:

.o-tip__arrow {
  border-top-color: currentColor;
}

[jtommy]

@dami2 I don't understand, can you reproduce it on codepen/codesandbox?

[dami2]

@dami2 I don't understand, can you reproduce it on codepen/codesandbox?

Here is the code sandbox: https://codesandbox.io/s/orugaui-tooltip-t9020

Some clarifications to be fair, I'm not sure if this is the case @cyberfly was reporting:

• I'm using oruga module in nuxt
• I'm using tailiwind in nuxt with the comunity module (https://github.com/nuxt-community/tailwindcss-module)
• The override of border-top-color only affects the tooltip on position = top (default)

that said, hope it can help

[jtommy]

Check https://github.com/oruga-ui/oruga/blob/5e02268c7f9c3972a857063f14f28bb0cfbad762/packages/oruga/src/scss/components/_tooltip.scss#L20

As you can see the border depends on position and you should override or add a new class for each position

[sambedingfield]

I've also had the need for an auto position on Tooltips, however that can quickly get complex and I can see why it would be out of scope.

It might be a good idea to trigger an event on tooltips when they open (active). We could then add our own functionality to check if they're off-screen etc.

[jtommy]

It's an interesting feature, we'll schedule it surely

[amanpatel]

I'm glad this is being considered! Whatever placement solution you come up with, can it also be applied to the directions of dropdown menus?

[blm768]

For a project I've been working on, I ended up implementing a little hack that basically finds the bounding rectangle of the tooltip content, translates it to all four possible positions, and picks the position that provides the greatest overlap with the viewport. If that's a viable strategy for Oruga's needs, I should be able to draft up a PR that integrates that strategy into Oruga itself.

API-wise, I'm imagining that the position prop could take an array of strings (top, bottom, left, or right), and the component would test each position, picking the "best" one, with ties broken in favor of earlier entries in the array.

[jtommy]

@blm768 sure, you are welcome. Position prop could accept "auto" as value

[ishitatsuyuki]

FWIW, there's https://github.com/Akryum/floating-vue which handles a lot of popup best practices (including focus/accessibility). Might be useful to incorporate that.