Question

我正在使用CSS在输入字段上显示工具提示，并在DIV中围绕inPut。基本上，样式适用于DIV。现在，该样式已应用于悬停在输入字段上。我想在用户将其切换到该字段后立即显示工具提示。我看到DIV在：focus上不起作用。一旦用户专注于该领域，就如何显示的任何想法。我正在使用角度，我们可以应用某些parentNode的类还是其他任何方式？

  test(e: Event) {    
    if (this.inputfield.nativeElement.parentNode.tagName.toString().toLowerCase() === 'div') {
      // apply the class to the parentNode
    }
  }
<div class="tooltipmain">
   <input #inputfield onFocus="test($event)> </input>
   <div class="tooltiptext">
      <table>
        <tr>
        <td></td>
        </tr>
      </table>
   </div>
</div>

.tooltipmain {
  position: relative;
  display: inline-block;
}

.tooltipmain .tooltiptext {
  visibility: hidden;
  width: 185px;
  background-color: #fff;
  color: #000;
  text-align: center;
}

.tooltipmain .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
}

.tooltipmain:hover .tooltiptext {
  visibility: visible;
}

Answer 1

您可以使用focus，blur，mouseenter和mouseleave来跟踪由输入字段触发的事件。这些事件中的每一个都将调用一个函数，该函数将更新isFocussed变量。

<input
    (blur)="focusChanged(false)"
    (focus)="focusChanged(true)"
    (mouseenter)="focusChanged(true)"
    (mouseleave)="focusChanged(false)"
    type="text">

在要切换可见性的元素上，可以使用[class.<className>="<expression>"]。这将根据表达式在元素上添加/删除类。

<div [class.isActive]="focussed" class="tooltiptext">

Stackblitz example here

在DIV FOCUS上显示工具提示，并在其上悬停

1 个答案: