Question

我正在使用primeng工具提示，并且仅在输入无效时才需要显示工具提示。我正在使用以下代码，但是工具提示显示在悬停或焦点上。

我尝试使用tooltipDisabled和tooltipEvent。

<input type="url"  name="url" class="form-control" pattern="(https|http)?://.+" 
                        formControlName="url" [disabled]="flag2" pTooltip="Please enter URL in valid format" 
                          tooltipPosition="left" tooltipEvent="focus">

预期：仅当输入框无效时才显示工具提示实际：工具提示显示在悬停或焦点上

Answer 1

所以简短的回答是：不，你不能。

长的答案是：您可以以编程方式显示它，但它仍将通过 primeNg 提供的唯一可用选项显示 - onHover 和/或 onFocus - 除非您从元素中删除这些交互。

以编程方式显示工具提示

您可以尝试做的是强制触发在您附加到的元素上的工具提示的事件。有多种方法可用于查找元素，这不是您的问题，但您可以通过在 DOM 上通过名称查找它来找到您的 url 输入字段。

var element = document.getElementsByName("url")[0];

无论哪种验证失败，您都可以使用该变量来调度触发工具提示的事件。

element.dispatchEvent(new Event('mouseenter'));

当元素有效时，您还可以通过调度适当的事件使工具提示消失。

element.dispatchEvent(new Event('mouseleave'));

正如我上面所说，当您悬停或聚焦输入时，这不会阻止它出现，但它回答了您如何完成的问题。

防止标准行为的解决方法

为了在元素悬停或聚焦时不显示工具提示，我建议您实际上将其附加到另一个元素上。您可以在输入字段旁边或其中创建和连接的一个。重要的是，您要与之交互的不是领域本身。然后，您可以使用 CSS 并通过工具提示将没有鼠标事件的元素添加到元素中，例如通过类。

.noPointerEvents {
  pointer-events: none;
}

这将确保用户不会用鼠标激活工具提示。它只会通过先前给定的代码触发。如果您选择了一个可以使用 Tab 键的元素，您也可以禁用 Tab 键。

Answer 2

有一个黑客。但这是一个hack，我不建议这样做。由于primeng不会提供任何控制工具提示的方法，因此您必须通过手动访问元素来进行操作。以下是执行此操作的一种方法。

使用tooltipStyleClass向工具提示添加两个类，一个具有d-none属性的类display:none !important;和另一个random-class类使用jquery或javascript访问元素。使用jQuery，我们将访问元素，并在输入无效时删除类d-none。此检查必须在(focus) = 'onFocus()'函数中实现。
在onFocus函数中，如果输入字段无效，请从工具提示元素中删除d-none类。如果输入字段有效，则将d-none类添加到元素

HTML

<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" tooltipStyleClass="d-none random-class" tooltipEvent="focus" (focus)="onFocus()">

CSS

.d-none {
    display: none !important;
}

JavaScript /组件

onFocus() {
    if (//input field invalid) {    
        setTimeout(() => {
            $('.random-class').removeClass('d-none');
        }, 100);
    }
}

对于这是一个hack，我不能给予足够的压力，我不建议这样做，但是它可以完成工作。如果要在其他输入字段上复制此字段，则每个字段应具有不同的随机类名称，以访问该特定元素。

是否可以有条件地显示primeng工具提示？

2 个答案: