聚焦时如何在输入字段上设置工具提示

Question

我正在文本输入字段上方显示工具提示。当我将鼠标悬停在该字段上时，可以看到工具提示。 我还需要在该领域的焦点上进行展示。当我尝试将：focus添加到.tooltipmain：hover .tooltiptext { }似乎无效。有什么想法吗？

<div class="tooltipmain">
   <input> </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;
}