Question

我有一个标签元素，其宽度远大于实际文本。因此，我显示的popover位于标签元素的中心，但不在文本区域的中心。

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

Answer 1

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

Answer 2

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

Answer 3

我只能告诉你我认为它应该是什么样的，并且由于没有提供代码，因此无法解决你可能做错的事情。通常我会投票来关闭没有代码的问题，但我之前从未做过自定义CSS工具提示。

段

＆＃13;

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

＆＃13;

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

3 个答案:

段