Question

我有以下html：

<div class="container">
  <span class="word-container" >
    <span tooltip-def="To sign or give formal approval to.">
      <span class="define-word highlight-word">ratifying</span>
    </span>
  </span>
</div>

CSS：

.container {
  margin-top: 100px;
}
.word-container [tooltip-def] {
  display: inline-block;
  position: relative;
}
.word-container [tooltip-def]:before {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  border-color: #323232 transparent transparent transparent;
  border-style: solid;
  border-width: 4px 6px 0 6px;
  content: "";
  display: none;
  top: -6px;
  z-index: 99;
}
.word-container [tooltip-def]:after {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  content: attr(tooltip-def);
  background: #323232;
  border-radius: 5px;
  color: #fff;
  display: none;
  font-family: open sans;
  font-size: 12px;
  height: auto;
  min-width: 250px;
  padding: 5px;
  text-align: center;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  width: auto;
  z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
  display: inline-block;
}

工具提示在左侧被切断。我在overflow: visible上尝试了.word-container [tooltip-def]:after和更高的z-index，但没有一个正常工作。

以下是jsfiddle演示：https://jsfiddle.net/mddc/5dtwr6zc/10/

如何进行最小的CSS更改以使工具提示可见？当左侧接触浏览器边缘时移动到右侧？

Answer 1

你很棒你只需要改变css。下面是css代码申请和检查。

.container {
  margin-top: 100px;
}
.word-container [tooltip-def] {
  display: inline-block;
  position: relative;
}
.word-container [tooltip-def]:before {
  left: 10%;
  position: absolute;
  transform: translateX(-50%);
  border-color: #323232 transparent transparent transparent;
  border-style: solid;
  border-width: 4px 6px 0 6px;
  content: "";
  display: none;
  top: -6px;
  z-index: 99;
}
.word-container [tooltip-def]:after {
  left: 20%;
  position: relative;
  transform: translateX(-50%);
  content: attr(tooltip-def);
  background: #323232;
  border-radius: 5px;
  color: #fff;
  display: none;
  font-family: open sans;
  font-size: 12px;
  height: auto;
  min-width: 250px;
  padding: 5px;
  text-align: center;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  width: auto;
  z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
  display: inline-block;
}

Answer 2

我已经做出了改变，可以在下面的小提琴中查看

https://jsfiddle.net/5dtwr6zc/14/

{
  "version": "1.0.0-*",
  "frameworks": {
    "netstandard2.0": {
      "dependencies": {
        "System.Runtime.Serialization.Xml": "4.3.0",
        "System.Runtime.Serialization.Json": "4.3.0"
      }
    }
  }
}

问题是after psuedo元素的定位。但我强烈建议根据使用JavaScript

的上下文使定位动态化

包含元素

2 个答案: