html - 如何在文本或文本字段的左侧显示工具提示

Question

我想要在鼠标悬停时在我的应用程序中显示工具提示。我尝试了很多 bt 没有得到任何结果 我在我的 css 中遗漏了一些东西 HTML.,

<div style="text-align: center;">
      <p>
        <a href="#" data-tooltip="left tooltip" data-placement="left">left tooltip</a>
      </p>

    </div>

有人说出解决方案

CSS:

  body {
      margin: 20px;
    }

    a[data-tooltip] {
      position: relative;
    }
    a[data-tooltip]::before,
    a[data-tooltip]::after {
      position: absolute;
      display: none;
      opacity: 0.85;
    }
    a[data-tooltip]::before {
      /*
       * using data-tooltip instead of title so we 
       * don't have the real tooltip overlapping
       */
      content: attr(data-tooltip);
      background: #000;
      color: #fff;
      font-size: 13px;
      padding: 5px;
      border-radius: 5px;
      /* we don't want the text to wrap */
      white-space: nowrap;
      text-decoration: none;

    }

    a[data-tooltip][data-placement="left"]::before {
      top: -25%;
      right: 100%;
      margin-right: 10px;
    }

我希望我的应用程序在鼠标悬停时有一个工具提示。我尝试了很多但没有得到任何结果

Answer 1

您的 CSS 中缺少 2 个元素(请参阅以下 CSS 代码中的注释):

DEMO

CSS:

a[data-tooltip]:hover::before { /* <- added :hover so it displays only on hover state */
    content: attr(data-tooltip);
    background: #000;
    color: #fff;
    font-size: 13px;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    text-decoration: none;
    display:block; /* <-- this line */
}