How can I change tootip style ? about ionic-tooltips HOT 7 OPEN

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.

from ionic-tooltips.

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...

from ionic-tooltips.

@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

from ionic-tooltips.

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.

from ionic-tooltips.

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 :(

from ionic-tooltips.

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

from ionic-tooltips.

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;
}

from ionic-tooltips.