Shulou(Shulou.com)05/31 Report--

In this article Xiaobian introduces in detail "how to customize the instruction in Tooltip in Angular", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to customize the instruction in Tooltip in Angular" can help you solve your doubts.

The effect picture is as follows:

Directory structure

Based on the code project implemented in the previous article, execute the command line:

# enter directives folder $cd directives# create tooltip folder $mkdir tooltip# enter tooltip folder $cd tooltip# create tooltip component $ng generate component tooltip# create tooltip directive $ng generate directive tooltip

After executing the above command line, you will get the file directory structure of app/directive/tooltip as follows:

Tooltip ├── tooltip / / tooltip component │ ├── user-list.component.html / / Page skeleton │ ├── user-list.component.scss / / Page unique style │ ├── user-list.component.spec.ts / / Test file │ └── user-list.component.ts / / javascript file ├── tooltip.directive.spec.ts / / test file └── tooltip.directive.ts / / instruction file

Well, here I put the components at the same level as tooltip, mainly for ease of management. Of course, this varies from person to person, and you can put it in the common components components folder.

Write tooltip components

In the html file, there are:

{{data.content}}

In the style file .scss, there are:

$black: # 000000bomber white: # ffffff;$caret-size: 6pxpositiontooltipmurbg: transparentize ($black, 0.25); / / transparentize is the syntax of sass $grid-gutter-width: 30pxbomico BGMAX: $white;$app-anim-time: 200mslightappanime curve: ease-out;$std-border-radius: 5pxindexMe max: 100scape /: host pseudo-class selector, set the style for the component element itself: host {position: Padding: $grid-gutter-width/3$ grid-gutter-width/2; background-color: $tooltip-bg; color: $body-bg-color; opacity: 0; transition: all $app-anim-time $app-anim-curve; text-align: center; border-radius: $std-border-radius; z-index: $zindex-max;}. Caret {/ / delimited width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent Border-bottom: 6px solid $tooltip-bg; position: absolute; top:-$caret-size; left: 50%; margin-left:-$caret-size/2; border-bottom-color: $tooltip-bg;}

Well, css is a magical thing, and then we will arrange an article to explain the content related to sass.

Then, the tooltip.component.ts content in the javascript file is as follows:

Import {Component, ElementRef, / / element points to HostBinding, OnDestroy, OnInit} from'@ angular/core' @ Component ({selector: 'app-tooltip', / / identifier, indicating what this component is called. Here is app-tooltip templateUrl:'. / tooltip.component.html', / / the skeleton styleUrls of this component: ['. / tooltip.component.scss'] / / the private style of this component}) export class TooltipComponent implements OnInit {public data: any; / / assign private displayTimeOut:any on directive / / the component itself host binds the related decorator @ HostBinding ('style.top') hostStyleTopdecorator: string; @ HostBinding (' style.left') hostStyleLeftmakers: string; @ HostBinding ('style.opacity') hostStyleOpacities: string; constructor (private elementRef: ElementRef) {} ngOnInit (): void {this.hostStyleTop = this.data.elementPosition.bottom +' px' If (this.displayTimeOut) {clearTimeout (this.displayTimeOut)} this.displayTimeOut = setTimeout ((_: any) = > {/ / the distance to the left of the tooltip distance is calculated here The formula here is: tooltip.left + .width-(tooltip.width/2) this.hostStyleLeft of the target element = this.data.elementPosition.left + this.data.element.clientWidth / 2-this.elementRef.nativeElement.clientWidth / 2 + 'px' this.hostStyleOpacity =' 1' This.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'}, 500)} / / component destruction ngOnDestroy () {/ / after the component is destroyed, clear the timer to prevent memory leak if (this.displayTimeOut) {clearTimeout (this.displayTimeOut)}

Write tooltip instructions

This is the focus of this article, the specific instructions, I marked it on the code ~

The related file tooltip.directive.ts is as follows:

Import {ApplicationRef, / / Global call detects ComponentFactoryResolver, / / creates component object ComponentRef, / / component instance association and guidance, pointing to the elements created by ComponentFactory Directive, ElementRef, EmbeddedViewRef, / / EmbeddedViewRef inherits from ViewRef and is used to represent the UI element defined in the template element. HostListener, / / DOM event listens to Injector, / / dependency injection} from'@ angular/core';import {TooltipComponent} from'. / tooltip/tooltip.component';@Directive ({selector:'[appTooltip]'}) export class TooltipDirective {@ Input ("appTooltip") appTooltipacks: string; private implementRefills: ComponentRef; / / gets the relevant location of the target element, such as left, right, top, bottom get elementPosition () {return this.elementRef.nativeElement.getBoundingClientRect () } constructor (protected elementRef: ElementRef, protected appRef: ApplicationRef, protected componentFactoryResolver: ComponentFactoryResolver, protected injector: Injector) {} / / create tooltip protected createTooltip () {this.componentRef = this.componentFactoryResolver .originveComponentFactory (TooltipComponent) / / bind tooltip component .cr eate (this.injector) This.componentRef.instance.data = {/ / bind data data content: this.appTooltip, element: this.elementRef.nativeElement, elementPosition: this.elementPosition} this.appRef.attachView (this.componentRef.hostView); / / add view const domElem = (this.componentRef.hostView as EmbeddedViewRef) .rootNodes [0] as HTMLElement; document.body.appendChild (domElem) } / / Delete tooltip protected destroyTooltip () {if (this.componentRef) {this.appRef.detachView (this.componentRef.hostView); / / remove the view this.componentRef.destroy ();}} / / listen to move the mouse into @ HostListener ('mouseover') OnEnter () {this.createTooltip () } / / listening mouse moves out @ HostListener ('mouseout') OnOut () {this.destroyTooltip ();}}

At this point, 99% of the function has been completed, so let's call it on the page.

Call on the page

Let's add the following to user-list.component.html:

Jimmy

We have declared the TooltipDirective directive on app.module.ts, and we can call it directly. The current results are as follows:

The tooltip we implemented is a bottom-centered presentation, that is, we usually use the framework, such as the bottom property of tooltip in angular ant design. For other attributes, readers can expand if they are interested.

After reading this, the article "how to customize Tooltip instructions in Angular" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.