I assume if you are going through this post then you have some idea about angular Framework.
still, let's start from the beginning, open your preferred terminal.
- npm install -g @angular/cli
- ng new my-app
- cd my-app
remove all the boilerplate content from app.component.html and just add a simple h1 tag or a button (basically where you want to show a tooltip).
<h1 tooltip="This is a tooltip">Hey there </h1>
back to the terminal type
- ng generate directive tooltip (CLI will create a directive class)
- Go to the created directive class and copy the class name (TooltipDirective)
- open app.module.ts and declare it in the declarations (declarations: [TooltipDirective])
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, TooltipDirective ],
bootstrap: [ AppComponent ]
})
- open TooltipDirective and add
tooltip: HTMLElement;
@Input("tooltip") tooltipTitle: string;
delay = 500;
constructor(private el: ElementRef, private renderer: Renderer2) {}
- tooltip is the element where we will show the tooltip message.
- tooltipTitle by this input we will get the tooltip message from the component
@HostListener("mouseover") onMouseEnter() {
showTooltip();
}
@HostListener("mouseleave") onMouseLeave() {
hidetooltip();
}
- onMouseEnter and onMouseLeave functions triggers by their respective event listeners.lets continue with the showToolTip function
showTooltip() {
this.tooltip = this.renderer.createElement("span");
// creating a span
this.tooltip.appendChild(this.renderer.createElement("span"));
// appending a span to the tooltip
this.renderer.appendChild(
this.tooltip,
this.renderer.createText(this.tooltipTitle)
// adding the tooltip text into the tooltip span
);
const hostPos = this.el.nativeElement.getBoundingClientRect();
// getting the hight width and positions of the target element
let top, left;
top = hostPos.bottom;
left = hostPos.left + hostPos.width / 2;
this.renderer.setStyle(this.tooltip, "top", `${top}px`);
//adding a top positions value for the tooltip
this.renderer.setStyle(this.tooltip, "left", `${left}px`);
// adding the left value
this.renderer.appendChild(document.body, this.tooltip);
// appending to the document
this.renderer.addClass(this.tooltip, "tooltip");
// adding the tooltip styles
}
- required CSS (you can add the below CSS in the root style file of your project)
.tooltip {
position: absolute;
max-width: 90%;
font-size: 14px;
text-align: center;
color: #f8f8f2;
padding: 5px;
background: #1e1e1f;
z-index: 1000;
opacity: 0;
}
.tooltip_show {
opacity: 1;
}
- to remove the tooltip on mouse leave
@HostListener("mouseleave") onMouseLeave() {
this.renderer.removeClass(this.tooltip, "tooltip_show");
// on mouse over it will remove the opacity
}
I have used this directive in a mobile app, There I am looking for a click event instead of mouseleave I guess you know why.
Done
Top comments (0)