Question

我想在鼠标悬停的应用程序中使用工具提示。我尝试了很多但没有得到任何结果我在我的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 */
}

Answer 2

在你的css中添加这个

a[data-tooltip]:hover::before, a[data-tooltip]:hover::after {
  position: absolute;
    display:inline;
  opacity: 0.85;
}

请参阅此处的工作演示：http://jsfiddle.net/Hw3k2/

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

2 个答案: