Показать всплывающую подсказку о DIV FOCUS и HOVER

Question

Я отображаю всплывающую подсказку в поле ввода, используя css и окружая inPut в DIV.В основном стиль применяется на DIV.Стиль теперь применяется при наведении курсора на поле ввода. Я хочу отобразить всплывающую подсказку, как только пользователь перейдет в это поле.Я вижу, что DIV не работает: фокус.Любые мысли о том, как показать, как только пользователь сосредоточится на поле.Я использую angular, можем ли мы применить некоторый класс 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 здесь