CSS3“工具提示”用：悬停：定位和大小后

我知道可以使用：hover：after selectors创建一个自定义的“工具提示”,并通过将原始元素标记为position：relative和tooltip为absolute来将此工具提示相对于原始元素对齐.

test
<span custom-tooltip="testing a custom tooltip" class="tooltip">test</span>
test

CSS：

.tooltip {
position: relative;
}
.tooltip:hover:after {
content: attr(custom-tooltip);
position: absolute;
background: #000000;
color: white;
}

但是,我必须使用绝对值来定位或调整它：在元素之后

top: 30px;
left: -30px;
width: 300px;

如果我想使元素尽可能宽,怎么办(百分比是相对于父元素创建一个大的垂直框,所以我不能告诉它去宽度：100％)

并且以父母为中心(左：-50％导致它被移动到父的50％左边,不居中)

这可能没有JavaScript吗？ (如果没有,是否有一些魔术选择器或函数来获得这个或那个的宽度和calc()正确的值？

解决方法

您可以使用white-space：Nowrap将工具提示强制到一行.我不知道如何在工具提示和工具提示适用的项目上强制特定宽度的情况下使工具提示居中.这是一个通用的例子(没有居中)：

<p>Lorem <span tooltip="Lorem ipsum">ipsum</span> dolor sit amet.</p>

而CSS：

*[tooltip] {
  position: relative;
  border-bottom: dotted 1px #000;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: Nowrap;
}

请注意,我使用的是：之前而不是：之后.如果要使工具提示居中并且能够定义固定宽度,则可以使用此CSS：

*[tooltip] {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 200px;
  margin: 0 -75px;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: Nowrap;
  width: 200px;
}

这里,项目的固定宽度等于工具提示的宽度,然后是负的左/右边距,以将其折叠回所需的大小.请注意添加 display：inline-block和text-align：center.

此技术对于内联工具提示不实用,但适用于按钮和“号召性用语”链接.

CSS3“工具提示”用：悬停：定位和大小后

解决方法

相关文章