Question

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

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

  bottom: 0;
  right: 0;

正如您所见，工具提示始终涵盖div内容。我想把工具提示始终放在右下方。

我添加

 Install-Package SslCertBinding.Net

到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>

Answer 2

只需将position:relative;添加到右下角应放置工具提示的元素中;

[tooltip] {
  position:relative;
}
[tooltip]:before {
    content: attr(tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease;
    bottom:0;
    right:0;
}

[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>

将工具提示始终置于右下角

2 个答案: