🚀 - Customizable Tooltips

[WynieCronje]

Which @taiga-ui/* package(s) are relevant/releated to the feature request?

core

Description

Allow css classes to be added to individual tooltips.

This will allow color changes as well as changing the styles of tooltips as needed.

[splincode]

@waterplea if we could use a directive, would that be useful?

<div class="my-custom-class" tuiTooltip>
   Please don't touch this
<div>

<div class="my-custom-class" [tuiTooltip]="template"><div>
<ng-template #template>Please don't touch this</ng-template>

[WynieCronje]

I have 2 solutions in my mind. One is to simply add a property cssClass as an input. And this will enable styling overrides on global level.

Another is to move the styling away from the tui-hint-box component. And into global styles. but to configure we will need to have css classes being added to tui-hint-box anyway.

This approach will allow for overriding default styles. then a cssClass property can switch between the desired class rules.

View initial developement here: WynieCronje@34a8634

[loxy]

We have some similar problems, but not regarding the tooltip. This pattern (restriction) is also used in other components.

Another option would be to add some CSS variables to the styles like:

:host {
   --tui-component-color: var(--tui-text-03);
   --tui-component-bg: transparent;

    .transition(color);
    position: relative;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    color: var(--tui-component-color);
    background: var(--tui-component-bg);
    ...
}

Then you can apply something like:

.my-namespace tui-tooltip {
  --tui-component-color: var(--my-color-var);
  --tui-component-bg: pink;
}

tui-tooltip.special {
  --tui-component-color: var(--my-other-color-var);
  --tui-component-bg: yellow;
}

[waterplea]

So I've been stewing on this for some time and I don't like the idea of passing on the CSS class. Can't really tell why, just a gut feeling. I think I would move tui-hint-box into token for tooltip component and abstract all positioning away into service or something like that. This would allow for all sorts of customisation from complete layout control to Angular animations for appearance/disappearance and it would be a bit in the same style as alerts and dialogs. I would architect it next week once I finish things I'm working on at the moment.

P.S. CSS variables won't help here because of portal pattern where DI tree and DOM tree don't match. I really need to make myself write an article on this subject, I've been meaning to for a while now 😀

[waterplea]

So I have refactored tooltips for 3.0 to be very flexible. However I realize that sometimes one just needs to change a little bit of CSS on the bubble (even we need it with error mode for red bubbles). So I've changed tuiHintMode into tuiHintAppearance similar to what we have in tuiWrapper component — it is attached to the bubble as data-appearance attribute. This would allow you to customize it any way you like or even change it across entire project with DI token for default values. You can have a look at this PR while you wait for stable 3.0 release :)
#2256

[waterplea]

Fixed in 3.0