Theming | Tooltip

src/app/components/tooltip/style/tooltipstyle.ts

@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+import { BaseStyle } from 'primeng/base';
+
+const theme = ({ dt }) => `
+.p-tooltip {
+    position: absolute;
+    display: none;
+    max-width: ${dt('tooltip.max.width')};
+}
+
+.p-tooltip-right,
+.p-tooltip-left {
+    padding: 0 ${dt('tooltip.gutter')};
+}
+
+.p-tooltip-top,
+.p-tooltip-bottom {
+    padding: ${dt('tooltip.gutter')} 0;
+}
+
+.p-tooltip-text {
+    white-space: pre-line;
+    word-break: break-word;
+    background: ${dt('tooltip.background')};
+    color: ${dt('tooltip.color')};
+    padding: ${dt('tooltip.padding')};
+    box-shadow: ${dt('tooltip.shadow')};
+    border-radius: ${dt('tooltip.border.radius')};
+}
+
+.p-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    scale: 2;
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    margin-top: calc(-1 * ${dt('tooltip.gutter')});
+    border-width: ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} 0;
+    border-right-color: ${dt('tooltip.background')};
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    margin-top: calc(-1 * ${dt('tooltip.gutter')});
+    border-width: ${dt('tooltip.gutter')} 0 ${dt('tooltip.gutter')} ${dt('tooltip.gutter')};
+    border-left-color: ${dt('tooltip.background')};
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    margin-left: calc(-1 * ${dt('tooltip.gutter')});
+    border-width: ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} 0 ${dt('tooltip.gutter')};
+    border-top-color: ${dt('tooltip.background')};
+    border-bottom-color: ${dt('tooltip.background')};
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    margin-left: calc(-1 * ${dt('tooltip.gutter')});
+    border-width: 0 ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} ${dt('tooltip.gutter')};
+    border-top-color: ${dt('tooltip.background')};
+    border-bottom-color: ${dt('tooltip.background')};
+}
+`;
+
+const classes = {
+    root: 'p-tooltip p-component',
+    arrow: 'p-tooltip-arrow',
+    text: 'p-tooltip-text'
+};
+
+@Injectable()
+export class TooltipStyle extends BaseStyle {
+    name = 'tooltip';
+
+    theme = theme;
+
+    classes = classes;
+}

src/app/components/tooltip/tooltip.css

@@ -1,4 +1,4 @@
-@layer primeng {
+/* @layer primeng {
     .p-tooltip {
         position: absolute;
         display: none;
@@ -62,4 +62,4 @@
         margin-left: -0.25rem;
         border-width: 0 0.25em 0.25rem;
     }
-}
+} */

src/app/components/tooltip/tooltip.ts

@@ -1,21 +1,21 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef, booleanAttribute, numberAttribute } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Inject, Input, NgModule, NgZone, OnDestroy, PLATFORM_ID, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef, booleanAttribute, inject, numberAttribute } from '@angular/core';
 import { PrimeNGConfig, TooltipOptions } from 'primeng/api';
 import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
 import { Nullable } from 'primeng/ts-helpers';
 import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
+import { TooltipStyle } from './style/tooltipstyle';
+import { BaseComponent } from 'primeng/basecomponent';
 
 /**
  * Tooltip directive provides advisory information for a component.
  * @group Components
  */
 @Directive({
     selector: '[pTooltip]',
-    host: {
-        class: 'p-element'
-    }
+    providers:[TooltipStyle]
 })
-export class Tooltip implements AfterViewInit, OnDestroy {
+export class Tooltip extends BaseComponent implements AfterViewInit, OnDestroy {
     /**
      * Position of the tooltip.
      * @group Props
@@ -164,16 +164,21 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     resizeListener: any;
 
+    _componentStyle = inject(TooltipStyle);
+
     constructor(
-        @Inject(PLATFORM_ID) private platformId: any,
+        @Inject(PLATFORM_ID) public platformId: any,
         public el: ElementRef,
         public zone: NgZone,
         public config: PrimeNGConfig,
-        private renderer: Renderer2,
+        public renderer: Renderer2,
         private viewContainer: ViewContainerRef
-    ) {}
+    ) {
+        super()
+    }
 
     ngAfterViewInit() {
+        super.ngAfterViewInit()
         if (isPlatformBrowser(this.platformId)) {
             this.zone.runOutsideAngular(() => {
                 const tooltipEvent = this.getOption('tooltipEvent');
@@ -204,6 +209,8 @@ export class Tooltip implements AfterViewInit, OnDestroy {
     }
 
     ngOnChanges(simpleChange: SimpleChanges) {
+
+        super.ngOnChanges(simpleChange)
         if (simpleChange.tooltipPosition) {
             this.setOption({ tooltipPosition: simpleChange.tooltipPosition.currentValue });
         }
@@ -721,6 +728,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     ngOnDestroy() {
         this.unbindEvents();
+        super.ngOnDestroy()
 
         if (this.container) {
             ZIndexUtils.clear(this.container);