html - 始终将工具提示定位在右下角

Question

我创建了一个简单的工具提示

[tooltip]:before {
  content: attr(tooltip);
  position: absolute;
  opacity: 0;
  transition: all 0.5s ease;
}

[tooltip]:hover:before {
  opacity: 1;
  color: #ffffff;
  background: #333333;
  padding: 10px;
}





/* ################ */
/* No need for this */
/* ################ */

div {
  background: cyan;
  margin: 20px;
  padding: 10px;
}

body {
  background: white;
}

<div tooltip="Tooltip">Div with tooltip</div>

如您所见，工具提示始终覆盖 div 内容。我想将工具提示始终放在右下角。

我加

  bottom: 0;
  right: 0;

到 CSS，然后工具提示出现在页面底部。我该如何解决这个问题？

Answer 1

因为你首先需要设置你的容器位置为relative :绝对定位指的是最后一个非静态元素。

在那之后，您不想使用 bottom: 0 但 top: 100% :使用 bottom 会将工具提示对齐到底部，而 top 将放置它在你的容器下面。

[tooltip]:before {
  content: attr(tooltip);
  position: absolute;
  opacity: 0;
  right: 0;
  top: 100%;
  transition: all 0.5s ease;
}

[tooltip]:hover:before {
  opacity: 1;
  color: #ffffff;
  background: #333333;
  padding: 10px;
}

[tooltip] {
  position: relative;
}





/* ################ */
/* No need for this */
/* ################ */

div {
  background: cyan;
  margin: 20px;
  padding: 10px;
}

body {
  background: white;
}

<div tooltip="Tooltip">Div with tooltip</div>