纯CSS：悬停时工具提示在文本上方居中

toiithl6 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(186)

拨弄看看我到目前为止有什么：http://jsbin.com/udegux/1/edit
超文本标记语言

<span id="test" class="drag-hint"><span>drag</span>Mouse and drag</span>

CSS：

.drag-hint {
  position:relative;
}
.drag-hint > span{
  display:none;
}
.drag-hint:hover > span {
  display:inline;
  position:absolute;
  top: -25px;
  left: 30px;
}

正如你所看到的，我现在通过指定“top”和“left”属性来手动将鼠标指针居中放置在文本上，如果文本较长或较短，我必须手动更改这些值来使指针居中。
我正在寻找一种方法来自动中心的话“拖动”以上的短语“鼠标和拖动”使用纯CSS。

css

来源：https://stackoverflow.com/questions/16754726/pure-css-center-tooltip-above-text-on-hover

2条答案

按热度按时间

pwuypxnk1#

如果将块放置在文本的顶部和上方并设置text-align: center，则不需要使用JavaScript。

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

JSBin.

赞(0）回复(0）举报 2023-03-05

lx0bsm1f2#

更动态的解决方案：

.tooltip--top {
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%);
}

如果这是您正在使用的唯一工具提示类，请向其添加position: absolute;。
5px是从父元素的上边缘偏移的。通常的东西。

赞(0）回复(0）举报 2023-03-05

我来回答

纯CSS：悬停时工具提示在文本上方居中

2条答案

相关问题

热门标签

最新问答