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">

预期：仅当输入框无效时才应显示工具提示

---

实际：工具提示显示在悬停或焦点上

有黑客攻击。但这是一个黑客，我不建议这样做。由于预处理不会公开任何控制工具提示的方法，因此必须手动访问元素。下面是一种方法

使用tooltipStyleClass将两个类添加到工具提示中，一个类

d-none

具有

display:none！重要的

property和其他类

random类

使用jquery或javascript访问元素。使用jQuery，当输入无效时，我们将访问元素并删除class

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()">

Javascript/组件

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

---

我不能再强调这是一个黑客的事实，我不建议这样做，但它完成了工作。如果您想在其他输入字段上复制该属性，那么每个字段都应该有不同的随机类名来访问该特定元素

所以简单的答案是：不，你不能

答案很长：您可以通过编程方式显示它，但它仍然会通过priming提供的唯一选项（onHover和/或onFocus）显示，除非您从元素中删除这些交互

以编程方式显示工具提示

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

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

无论哪个验证失败，都可以使用该变量分派触发工具提示的事件

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

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

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

正如我上面所说的，这不会阻止它在您悬停或集中输入时出现，但它回答了您关于如何实现的问题

防止标准行为的变通方法

为了不让工具提示在元素悬停或聚焦时出现，我建议您将其全部附加到另一个元素。您可以在输入字段旁边或输入字段中创建和连接。重要的是，您想要与之交互的不是字段本身。然后您可以使用CSS并使用工具提示no mouse events添加到元素中，例如通过类

.noPointerEvents {
  pointer-events: none;
}

---

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

如果文本字段无效，您是否禁用它？

.noPointerEvents {
  pointer-events: none;
}