我有一个工具提示"你好"我希望在按下按钮时显示。 看着这个:https://swimlane.github.io/ngx-ui/#tooltip和其他工具提示库,但似乎都需要使用dom,并且不会以编程方式打开和关闭。
在角度1中,您可以执行以下操作: http://plnkr.co/edit/QeQqqEJAu1dCuDtSvomD?p=preview
<!-- Popover can be controller by the following checkbox -->
<label>
<input type="checkbox" ng-model="isOpen">
show popover?
</label>
<br>
<!-- isOpen is a $scope variable -->
<span popover="Hello!"
popover-toggle="isOpen"
popover-placement="bottom">
Popover below
</span>
是否有一个库/方式我可以用Angular2做到这一点? (如果ngx-ui工具提示无法执行此操作)我使用bootstrap和上面引用的库作为我的工具提示。如果有另一种类型的库或某种方式我可以做到这一点,那就太好了。
答案 0 :(得分:0)
你必须根据你的要求创建一个Tooltip指令,下面是相同的代码,我支持鼠标悬停并专注。
<强>指令:强>
import { Directive, ElementRef, Input, HostListener, Renderer } from '@angular/core';
@Directive(
{
selector: '[Tooltip]',
}
)
export class TooltipDirective {
constructor(public el: ElementRef, public renderer: Renderer) { }
tooltipTitle: any = '';
tooltipText: any = '';
tooltipImage: any = '';
isFormFieldModel: boolean = false;
@Input() dataContext: any;
@Input() IsButtonPanel: boolean = false;
private mouseTop: number = 0;
private mouseLeft: number = 0;
tooltipTop: number = 0;
tooltipLeft: number = 0;
@HostListener('click') onclick() {
this.hover(false);
}
@HostListener('mouseenter', ['$event']) onMouseEnter(event: MouseEvent) {
this.SetTooltipDetails(event);
}
@HostListener('mouseleave') onMouseLeave() {
this.hover(false);
}
@HostListener('focusin') onFocus() {
this.SetTooltipDetails(null);
}
@HostListener('focusout') onFocusout(target) {
this.hover(false);
}
SetTooltipDetails(event: MouseEvent)
{
this.hover(false);
if (this.mainDiv != null) {
this.mainDiv.remove();
this.ImgElement.remove();
}
if (event != null) {
this.mouseLeft = event.clientX;
this.mouseTop = event.clientY;
}
else
{
this.mouseLeft = this.el.nativeElement.getBoundingClientRect().left;
this.mouseTop = this.el.nativeElement.getBoundingClientRect().top + 20;
}
if (this.dataContext != null) {
this.tooltipText = this.dataContext.Description;
if (this.isFormFieldModel) {
if (!this.dataContext.IsShowToolTip) {
return;
}
if (this.dataContext.UseContextHeader == true && this.dataContext.ContextHeaderValue != null) {
this.tooltipTitle = this.dataContext.ContextHeaderValue;
}
else {
this.tooltipTitle = this.dataContext.PrettyName;
}
}
else {
this.tooltipTitle = this.dataContext.Header;
this.tooltipImage = this.dataContext.Icon;
}
if (this.tooltipTitle == '' || this.tooltipTitle == null || this.tooltipTitle == 'null') {
this.tooltipTitle = "Header";
}
if (this.tooltipText == null || this.tooltipText == 'null') {
this.tooltipText = "";
}
if (this.tooltipImage==null || this.tooltipImage == '' || this.tooltipImage == 'null') {
this.tooltipImage = "info.png";
}
this.hover(true);
}
}
mainDiv: any; ImgElement: any; InputElement: any; divElement: any; divElement1: any; divElement2: any;
hover(onMouseHover: boolean) {
if (onMouseHover && !this.IsButtonPanel) {
//Dynamically Create Img Element
var elementTooltipItem = this.el.nativeElement.getElementsByClassName("tooltipMain")[0];
if (elementTooltipItem != null) {
elementTooltipItem.outerHTML = '';
}
else
{
let tooltipItem = this.el.nativeElement.nextElementSibling;
if (tooltipItem != null && tooltipItem.className.indexOf("tooltipMain") >= 0)
{
tooltipItem.outerHTML = '';
}
}
this.ImgElement = this.renderer.createElement(this.el.nativeElement, "img");
this.renderer.setElementAttribute(this.ImgElement, "src", "images/" + this.tooltipImage);
this.renderer.setElementStyle(this.ImgElement, "width", "40px");
this.renderer.setElementStyle(this.ImgElement, "height", "40px");
this.renderer.setElementStyle(this.ImgElement, "margin-right", "2px");
this.renderer.setElementStyle(this.ImgElement, "float", "left");
this.renderer.setElementStyle(this.ImgElement, "border", "1px solid #CCC");
this.renderer.setElementStyle(this.ImgElement, "border-radius", "5px");
this.renderer.setElementStyle(this.ImgElement, "padding", "5px");
this.renderer.setElementStyle(this.ImgElement, "backgroundColor", "#f5f5f5");
this.renderer.setElementStyle(this.ImgElement, "display", "block");
//tooltip text outer div
this.divElement = this.renderer.createElement(this.el.nativeElement, "div");
this.renderer.setElementStyle(this.divElement, "border", "1px solid #CCC");
this.renderer.setElementStyle(this.divElement, "margin-left", "38px !important");
this.renderer.setElementStyle(this.divElement, "color", "black");
this.renderer.setElementStyle(this.divElement, "border-radius", "5px");
this.renderer.setElementStyle(this.divElement, "padding", "5px");
this.renderer.setElementStyle(this.divElement, "float", "left");
this.renderer.setElementStyle(this.divElement, "backgroundColor", "#f5f5f5");
this.renderer.setElementStyle(this.divElement, "text-align", "left !important");
//tooltip text header div
this.divElement1 = this.renderer.createElement(this.el.nativeElement, "div");
this.renderer.setElementClass(this.divElement1, "header", true);
this.renderer.createText(this.divElement1, this.tooltipTitle);
//tooltip text description div
this.divElement2 = this.renderer.createElement(this.el.nativeElement, "div");
this.renderer.setElementClass(this.divElement2, "description", true);
this.renderer.createText(this.divElement2, this.tooltipText);
this.mainDiv = this.renderer.createElement(this.el.nativeElement, "div");
this.renderer.setElementProperty(this.mainDiv, "disabled", true);
this.renderer.setElementClass(this.mainDiv, "tooltipMain", true);
this.mainDiv.appendChild(this.ImgElement);
this.divElement.appendChild(this.divElement1);
this.divElement.appendChild(this.divElement2);
this.mainDiv.appendChild(this.divElement);
let tooltipWidth = this.mainDiv.clientWidth + 10;
let tooltipHeight = this.mainDiv.clientHeight + 10;
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
if ((windowWidth - this.mouseLeft) < tooltipWidth) {
//this.tooltipLeft = windowWidth - (tooltipWidth);
this.renderer.setElementStyle(this.mainDiv, "right", "0px");
} else {
//this.tooltipLeft = this.mouseLeft;
this.renderer.setElementStyle(this.mainDiv, "left", this.mouseLeft + "px");
}
if ((windowHeight - this.mouseTop) < tooltipHeight) {
this.tooltipTop = this.mouseTop - 20;
this.renderer.setElementStyle(this.mainDiv, "bottom", "0px");
} else {
this.renderer.setElementStyle(this.mainDiv, "top", this.mouseTop + 5 + "px");
}
//this.renderer.setElementStyle(this.mainDiv, "left", this.tooltipLeft + "px");
//this.renderer.setElementStyle(this.mainDiv, "top", this.tooltipTop + "px");
}
else {
if (this.mainDiv != null) {
this.mainDiv.remove();
this.ImgElement.remove();
}
}
}
}
在组件HTML:
这里dataContext是一个对象,它保存工具提示的详细信息,如描述和其他,您可以根据您的要求进行配置
<div Tooltip [dataContext]="dataContext"></div>
<强>输出:强>