Search results

Customization in Angular Tooltip component

01 Dec 2021 / 2 minutes to read

The Tooltip can be customized by using the cssClass property, which accepts custom CSS class names that define specific user-defined styles and themes to be applied on the Tooltip element.

Tip pointer customization

Styling the tip pointer’s size, background, and border colors can be done using the cssClass property, as given below.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <ejs-tooltip id="tooltip" content='Tooltip arrow customized' cssClass='custom-tip'>
            Show tooltip
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        background-color: #cfd8dc;
        border: 3px solid #eceff1;
        box-sizing: border-box;
        margin: 80px auto;
        padding: 20px 0;
        width: 200px;
        text-align: center;
        color: #424242;
        font-size: 20px;
    }

    .custom-tip.e-tooltip-wrap {
        padding: 4px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
      height: 20px;
      width: 12px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
      height: 20px;
      width: 12px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
      height: 12px;
      width: 20px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
      height: 12px;
      width: 20px;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 20px solid #616161;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
      border-bottom: 20px solid #616161;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
      border-bottom: 6px solid transparent;
      border-right: 20px solid #616161;
      border-top: 6px solid transparent;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
      border-bottom: 6px solid transparent;
      border-left: 20px solid #616161;
      border-top: 6px solid transparent;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
      border-left: 12px solid transparent;
      border-right: 5px solid transparent;
      border-top: 19px solid #616161;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
      border-bottom: 19px solid #616161;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-left {
      border-bottom: 5px solid transparent;
      border-right: 19px solid #616161;
      border-top: 5px solid transparent;
    }

    .custom-tip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-right {
      border-bottom: 5px solid transparent;
      border-left: 19px solid #616161;
      border-top: 5px solid transparent;
    }
    `],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Tooltip customization

The complete look and feel of the Tooltip can be customized by changing it’s background color, opacity, content font, etc. The following code example shows the way to achieve it.

Source
Preview
app.component.ts
app.module.ts
main.ts
custom.css
Copied to clipboard
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <ejs-tooltip id="tooltip" content='Tooltip customized' cssClass='customtooltip'>
            Show tooltip
    </ejs-tooltip>
    `,
    styleUrls: ['./custom.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TooltipModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#tooltip {
    display: block;
    background-color: #cfd8dc;
    border: 3px solid #eceff1;
    box-sizing: border-box;
    margin: 80px auto;
    padding: 20px 0;
    width: 200px;
    text-align: center;
    color: #424242;
    font-size: 20px;
}

/* csslint ignore:start */

.customtooltip.e-tooltip-wrap .e-tip-content {
    line-height: 20px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    height: 12px;
    left: 50%;
    top: 100%;
    width: 24px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    height: 12px;
    left: 50%;
    top: -9px;
    width: 24px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
    height: 24px;
    left: -9px;
    top: 48%;
    width: 12px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
    height: 24px;
    left: 100%;
    top: 50%;
    width: 12px;
}

.customtooltip.e-tooltip-wrap {
    border-radius: 4px;
    opacity: 1;
}

.customtooltip.e-tooltip-wrap.e-popup {
    background-color: #fff;
    border: 2px solid #000;
}

.customtooltip.e-tooltip-wrap .e-tip-content {
    color: #000;
    font-size: 12px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-left: 12px solid transparent;
    border-right: 14px solid transparent;
    border-top: 12px solid #000;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom: 12px solid #000;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-bottom: 12px solid transparent;
    border-right: 12px solid #000;
    border-top: 12px solid transparent;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-bottom: 12px solid transparent;
    border-left: 12px solid #000;
    border-top: 12px solid transparent;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
    color: #fff;
    font-size: 25.9px;
}

/* csslint ignore:end */