带框阴影的工具提示 - 微提示

Question

是否可以从 microtip 库中将箭头放在工具提示的前面？我正在尝试为整个工具提示添加阴影，但是向下的头部在后面，所以它被挡住了。尝试在之后添加背景图片，但无法正常工作。

代码如下：

&[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 中，如果未定义 z-index，则 :after 比 :before 出现...

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

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

带框阴影的工具提示 - 微提示

Tooltip with box shadow - microtip

html

css

tooltip