我知道可以使用: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()正确的值?

最佳答案

您可以使用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-blocktext-align:center
这种技术不适用于内联工具提示,但适用于按钮和“动作调用”链接。

关于css - CSS3“工具提示”,带有:悬停:位置和大小后,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8206315/

10-12 12:45
查看更多