CSS3"工具提示"用:悬停:定位和大小后

Question

我知道可以使用:hover:after选择器创建一个自定义的"工具提示",并通过将原始元素标记为position:relative工具提示,将此工具提示与原始元素对齐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;
}

但是,我必须使用绝对值来定位或调整此:after元素的大小

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

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

并且在父级下面居中(left: -50%导致它被移动到父级的50%左侧,而不是居中)

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

Answer 1

您可以使用将工具提示强制为单行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;
}

请注意,我正在使用:before而不是:after.如果要使工具提示居中并且能够定义固定宽度,则可以使用此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.

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