How can I change tootip style ?

[lagriffedigitale]

On IONIC 4, how can I change the tooltip style (background-color, padding, text style, etc...) ?
I've searched but I don't find anything...

Thanks.

[ihadeed]

Hey @lagriffedigitale

As of now I can't give you an answer since I haven't tried to style it externally.

I will update the Ionic 4 implementation to have its own SASS file that uses CSS variables to make customisation easy and more aligned with the current styling methods for Ionic 4.

Please keep in mind the current Ionic 4 version is experimental and might change soon. I've discovered a few issues with it due to usage of shadow DOM in latest Ionic. Hopefully I will find a solution to that soon.

[vieiraFelipee]

Add this to global.css

tooltip-box {
	background-color: var(--ion-color-primary) !important;
	color: var(--ion-color-primary-contrast) !important;
	border-radius: 5px !important;
}

But i can't style the arrow.. please if u find how post here...

[ihadeed]

@naolembro the arrow would be tooltip-box:before. See here: https://github.com/zyra/ionic-tooltips/blob/master/projects/ionic-tooltips/src/lib/tooltip-box.component.ts#L46

[tanrobles]

hey guys

If you are using Ionic 3, you can to add a style:

.tooltip {
border-radius: 4px;
border: none !important;
background: YOUR-COLOR !important;
color: #fff;
font-size: 1.2rem;
}

maybe globally or in you local.

[0x14Rp]

hey guys

If you are using Ionic 3, you can to add a style:

.tooltip {
border-radius: 4px;
border: none !important;
background: YOUR-COLOR !important;
color: #fff;
font-size: 1.2rem;
}

maybe globally or in you local.

this doesn't work for me :(

[antripathi121]

we can modify arrow style also as following
.has-arrow.arrow-bottom:before {
border-top: 5px solid blueviolet !important;
}

[antripathi121]

Add this to global.css

tooltip-box {
	background-color: var(--ion-color-primary) !important;
	color: var(--ion-color-primary-contrast) !important;
	border-radius: 5px !important;
}

But i can't style the arrow.. please if u find how post here...

.has-arrow.arrow-bottom:before {
border-top: 5px solid blueviolet !important;
}