将弹出窗口对齐标签元素中文本区域的中心答案

【问题标题】：Aligning the popup at the center of the text area in label element将弹出窗口对齐标签元素中文本区域的中心
【发布时间】：2016-12-08 10:25:07
【问题描述】：

我有一个标签元素，其宽度比实际文本大得多。因此，我显示的弹出框位于标签元素的中心，而不是文本区域的中心。

我希望我的popover message 直接显示在文本label 下方。我可以将onmouseover 事件附加到文本label 而不是dom 吗？或者可以用css来完成吗？

【问题讨论】：

标签文字不居中？你有实际的代码吗？也许在minimal reproducible example？
我无法分享代码，但标签中的文本是右对齐的，以便接近快照中的日期元素。

标签： javascript css

【解决方案1】：

是的，您可以在 CSS 文件中调整宽度。
检查此链接。它可以帮助你 - https://stackoverflow.com/a/2820603/7004388

【讨论】：

【解决方案2】：

我为label 元素中的文本创建了一个span 元素，然后在span 元素上添加了hover 事件。

【讨论】：

【解决方案3】：

我只能向您展示我认为应该是什么样的，而您可能做错的任何事情都无法解决，因为没有提供代码。通常我会在没有代码的情况下投票结束问题，但我之前从未制作过自定义 CSS 工具提示。

片段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>tooltip</title>
  <style>
    .tooltip {
      position: absolute;
      display: inline-block;
      bottom: 1px;
      right: 0;
    }
    .tooltip .text {
      visibility: hidden;
      width: 0;
      font-size: 0;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
      position: absolute;
      z-index: 0;
      top: 120%;
      left: 50%;
      margin-left: -60px;
      transition: all .6s;
    }
    .tooltip .text::after {
      content: " ";
      position: absolute;
      bottom: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent black transparent;
    }
    .tooltip:hover .text {
      visibility: visible;
      z-index: 1;
      width: 120px;
      font-size: 16px;
      transition: all .6s;
    }
    label {
      position: relative;
      min-width: 200px;
      line-height: normal;
      display: inline-block;
      cursor: pointer;
      vertical-align: text-top;
      outline: 1px dotted red;
      padding-bottom: 2px;
    }
  </style>
</head>

<body>
  <header></header>
  <section>
    <label for='txt1'>&nbsp;<b class="tooltip"><b class="text">Tooltip Text</b>Label Text</b>
    </label>
    <input id='txt1'>
  </section>
  <footer>&nbsp;</footer>
  <script>
  </script>
</body>

</html>

【讨论】：