Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
KTUI init single element
I am using KTUI/ Metronic with angular. I am wrapping a ktui element in a component to better use it with angular. Now I want to init() it. My current solution:
ngAfterViewInit() {
KTTooltip.init();
}
This works. The issue I have is, that I now initialize every Tooltip which is currently visible. Not really what I want. Can I address one single Tooltip/select/... and just initialize this?
Replies (3)
Hi Samuel Reinfelder
In your Angular component, initialize the tooltip for a specific element:
import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
declare var KTTooltip: any;
@Component({
selector: "app-tooltip",
templateUrl: "./tooltip.component.html",
styleUrls: ["./tooltip.component.css"]
})
export class TooltipComponent implements AfterViewInit {
@ViewChild("tooltipElement", { static: false }) tooltipElement!: ElementRef;
ngAfterViewInit() {
// Get the specific element (using ViewChild or querySelector)
const tooltipEl = this.tooltipElement.nativeElement; // or document.querySelector("#your-tooltip-id");
// Configuration options (optional)
const options = {
placement: "bottom-start"
};
// Initialize only this specific tooltip
const tooltip = new KTTooltip(tooltipEl, options);
}
}
