Question

是否可以将箭头放在工具提示前面的微尖头？？我试图在整个工具提示中添加阴影，但是指向下方的头部位于背面，因此它被阻挡。尝试在后面添加背景图像，但它无法正常工作。

以下是代码：

&[aria-label][role="tooltip"] {
  --microtip-font-size: 15px;
  &::after {
    box-shadow: 5px 9px 45px 4px darkgrey;
    border-radius: 7px;
    border: 1px solid darkgrey;
    background-color: white;
    color: #000080;
  }
}


<button type="button" name="button" class='undo' aria-label="Undo" data-microtip-position="top" role="tooltip"></button>

Answer 1

这是一个工具提示的基本示例，可以帮助您解决问题。

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<html>

<body style="text-align:center;">

  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>

  <p>Just note that the position of the tooltip text isn't very good.</p>

</body>

</html>

Answer 2

如果未定义:after，则您的工具提示内容位于:before且箭头位于:after且:before出现而不是z-index ...

尝试定义z-index箭头，即[aria-label][role~="tooltip"]:before ...

[aria-label][role~="tooltip"]:before {
  z-index: 99;
}

带有阴影的工具提示 - microtip

2 个答案: