[英]How to add line break to custom tooltip directive using angular 7
我是 angular 7 指令的新手。 我使用 angular 7 创建了一个自定义工具提示指令。现在,当我从 html 传递工具提示文本时,我无法指定换行符。 我想在从 html 传递的 Tootltip 标题文本之后换行。 知道如何实现这一目标吗? 试图通过 and 
and 
在工具提示指令的输入字符串中换行的代码。 也没有用。
这是我到目前为止所尝试的。
我的指令:tooltip.directive.ts:
import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[tooltip]'
})
export class TooltipDirective {
@Input('tooltip') tooltipTitle: string;
@Input() placement: string;
@Input() delay: number;
tooltip: HTMLElement;
offset = 10;
constructor(private el: ElementRef, private renderer: Renderer2) { }
@HostListener('mouseenter') onMouseEnter() {
if (!this.tooltip) { this.show(); }
}
@HostListener('mouseleave') onMouseLeave() {
if (this.tooltip) { this.hide(); }
}
show() {
this.create();
this.setPosition();
this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
}
hide() {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
window.setTimeout(() => {
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip = null;
}, 0);
}
create() {
this.tooltip = this.renderer.createElement('span');
this.renderer.appendChild(
this.tooltip,
this.renderer.createText(this.tooltipTitle) // textNode
);
this.renderer.appendChild(document.body, this.tooltip);
this.renderer.addClass(this.tooltip, 'ng-tooltip');
this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
}
setPosition() {
const hostPos = this.el.nativeElement.getBoundingClientRect();
const tooltipPos = this.tooltip.getBoundingClientRect();
let top, left;
if (this.placement === 'top') {
top = hostPos.top - tooltipPos.height - this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
/* other positions to be added */
this.renderer.setStyle(this.tooltip, 'top', `${top}px`);
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
}
}
CSS :
/* Styles for tooltip */
.ng-tooltip {
position: absolute;
max-width: 150px;
font-size: 14px;
text-align: center;
color: #f8f8f2;
padding: 3px 8px;
border-radius: 2px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
background-color: #38393b;
z-index: 1000;
opacity: 0;
}
.ng-tooltip:after {
content: "";
position: absolute;
border-style: solid;
}
.ng-tooltip-top:after {
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-color: #38393b transparent transparent transparent;
}
.ng-tooltip-show {
opacity: 1;
}
从 html 文件中,我通过传递这样的文本来调用工具提示指令:
<div tooltip="Title: ( want a line break here) 
 {{someVariable}}" placement="top" class="remark">Hover Here</div>
这可以通过采取任何一种方法来解决,要么创建两个不同的输入,例如@Input('Title'): string
和@Input('Body'): string
并传递给两个不同的参数。 或者,如果您想在单个参数中传递它,请使用接口,例如
export interface IToolTip {
title?: string;
body: string;
footer?: string;
}
将此接口分配给您的工具提示变量@Input('tooltip') tooltipTitle: ITooltip;
其余的事情可以在create()
函数下处理。
谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.