Alternative to tooltip customClass deprecated

[sbengo]

Hi, just updated my ng2bootstrap module and I am surprised that customClass is deprecated on tooltip...

Looking at the example provided, you have recently commented the part where customClass was applied. This is really important for me because we are showing a dt/dd inside the tooltip so we need it wider than 200px

There is some alternative?
Will it come back?

Thanks!

[valorkin]

most probably as tooltip view config

[valorkin]

I am updating and structuring docs, so I will get to this very soon

[valorkin]

@sbengo please check Alert examples http://valor-software.com/ng2-bootstrap/#/alerts
global and component level styling

you need to overrid .tooltip-inner max-width param

[valorkin]

should be something like

 styles: [`
  :host >>> ..tooltip-inner {
    max-width: 400px;
  }
 `]

[Agamnentzar]

It's not going to work with container="body" though, right ?

[valorkin]

Not, sure yet. I will try

[wojciechpolak]

I have the same problem with deprecated tooltipClass. I use it with tooltipAppendToBody (now container="body") and I was able to overwrite .tooltip-inner class. Consider the following example:

.customClass {
    .tooltip-inner {
        text-align: left;
        white-space: pre-line;
        max-width: 500px;
    }
}

Now, after it's deprecated (along with tooltipHtml), I'm trying with TemplateRef:

<div [tooltip]="ref"></div>
<template #ref>
  <div class="customClass">...some HTML...</div>
</template>

but unfortunately this only results with:

<div class="tooltip-inner">
  <div class="customClass">
  ...
  </div>
</div>

Please note that I'm also using container="body" which is mandatory for me.

Without parent selectors in CSS, not even in CSS3, it's not possible to get the same behaviour without tooltipClass. I can't find any workaround :/ Please add it back, for me it's very crucial to have it in ng2-bootstrap. Best regards!

[valorkin]

Guys, does this post makes any sense for current situation?
https://perishablepress.com/awesome-new-css3-selectors/

[wojciechpolak]

@valorkin As the article stated only some limited, new browsers might support that. I could not even find info about it at caniuse.com. The sad reality is that some projects (like the one I'm working on currently) still need to support old browsers like IE11 (and so far ng2-bootstrap was working great)... Waiting for CSS4 is not an option today :(

[Agamnentzar]

@valorkin @wojciechpolak The article is April fools joke.

[sbengo]

Hi guys
Sorry @valorkin , I was out of the office the last week so couldn't test it!

Overriding with an embed style clause is actually working but as @Agamnentzar said, it is not working in container=body case. Also there is no chance to play with different tooltip classes on the same component.

Sorry for the following question, I am so novice on angular2 but, there is no way to set it as an input and use again the ngClass statement, as it is commented on the code?

Thanks for all,
Regards!

[valorkin]

I will be at work tomorrow, I will try to play with container=body, if no luck I will add custom class back

[valorkin]

Thing is, there are a lot of popup components here , so if there are no other solution, all of them will be affected

[valorkin]

Ok, I have tried global styling with popovers
I see an issue, so it will be added this week back
but in a bit different format
it will be added to popover\tooltip container component
so you will be able to style things properly via configuration or html prop

[sgnensala]

Hi @valorkin ... when you say: "it will be added this week back...but in a bit different format " ... will the NEW format still support tooltipClass and tooltipHtml? Thanks

[svojislav]

Can U please tell me what /* tslint:disable no-unused-css*/ means and what should I do (change tslint settings or...) I managed to change popover width only in css file which is imported in index.html. Even then when I change height or max-height popover can't be closed..

[perrosen]

Any updates on this? Really need something like this so I can create global classes for different sizes (sm, md and large tooltips). Now these styles need to reside within each component which seems tedious.

[seinavco]

+1

[KevinHongSpigit]

Hi @valorkin Any update on this issue?

[arekzelechowski]

Hi @valorkin, any update to this? I can bring this feature back and create pull request if you want.

[valorkin]

I was reading this like yesterday, and half of year just gone away ...
I should stop blinking

[vovkats]

@valorkin I am trying to set width of tooltip but I can't do it. I use option containerClass

[valorkin]

http://valor-software.com/ngx-bootstrap/#/tooltip#custom-class
so you need to create proper class and apply it to tooltip
take in account that your class selector weight should be higher than default one

[singhrasster]

@valorkin I tried customClass property with ngx-bootstrap tooltip and it works fine. However, I see that the tooltip is transparent now. I can see all the elements on the main page body through the tooltip. How do I fix this?

I tried the following without any luck:

.tooltip.customClass .tooltip.in{
filter: alpha(opacity=100);
opacity: 1;
}

How do I resolve this issue?

[valorkin]

check the docs linked above, and use containerClass input prop