Question

我的英语不是最好的，但我希望写下这个问题可以理解的。

我试图使div文本可编辑，通常文本将溢出div的大小所以我需要将文本保存在div overflow:scroll但我想在该div中接受html元素，尤其是工具提示。这个html元素（工具提示）通常不会出现div，但如果我使用overflow:scroll来管理文本，我会失去属性让工具提示溢出。这是一张说明发生的事情的图像：

代码中有代码显示的图像显示：https://codepen.io/anon/pen/jwXGRE?editors=1100

#Out {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  margin-top: 30px;
  overflow: scroll;
}

#noOut {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  margin-top: 30px;
}

body {
  background: red;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

<div id="Out" contenteditable="true">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1
  div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1</div>

<div id="noOut" contenteditable="true">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span></div>div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2
    div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2</div>`

总之，我需要让工具提示溢出而不是文本。

再次抱歉我的英语不好，我会感谢任何提示或帮助:)。

Answer 1

<强>更新这是您的解决方案：

body {
  background: pink;
  padding: 20px;
  font-family: arial;
}

.outContainer {
  position: relative;
}

#Out {
  background: #333;
  line-height: 22px;
  color: white;
  width: 300px;
  height: 200px;
  margin-top: 30px;
  overflow: scroll;
  padding: 10px;
}

.hover-div {
  cursor: pointer;
  background: white;
  color: #333;
  margin: 8px 0px;
}

.tooltip {
  position: absolute;
  display: none;
  top: -40px;
  left: 0px;
  border-bottom: 1px dotted black;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
}

.hover-div:hover .tooltip {
  display: block;
}

<div class="outContainer">
  <div id="Out" contenteditable="true">
    <div class="hover-div">1- Hover Over here
      <div class="tooltip">Tooltip text</div>
    </div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    <div class="hover-div">2- Hover Over again
      <div class="tooltip">Tooltip text</div>
    </div>
    Additional text goes here It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  </div>
</div>

代码笔：https://codepen.io/Omi236/pen/KqbQoO?editors=1100

Answer 2

该问题与.tooltiptext的定位有关。在第一个示例中，具有相对定位的父级在span之后关闭。在第二个示例中，缺少结束div。当我将它添加到最后并更改工具提示的位置时，它可以正常工作。

#Out {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  margin-top: 30px;
  overflow: scroll;
}

#noOut {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  margin-top: 30px;
}

body {
  background: red;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext {
  width: 120px;
  top: -2em;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

<div id="Out" contenteditable="true">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1
  div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 div1</div>

<div id="noOut" contenteditable="true">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2
    div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2</div></div>

Answer 3

You need something extra.

This is one of those things where CSS hasn't quite caught on.

Nevertheless, it's still possible with pure CSS.

So you want the tool tip to appear but also don't want the div to overflow horizontally. You also don't want to affect any other elements.

You can mess around with hard-coded CSS positioning but that will not be easy to work with if you need to implement your idea on many elements.

The fix comes in the form of Hint.css:

A CSS only tooltip library for your lovely websites

I believe this library will assist in getting the desired effect but not entirely as you described.

Here's a working example of how I would display a tooltip for the element you described while keeping things clean and simple.

The tool tip will always be displayed at the bottom of the screen no matter what. It will never affect anything else.

[class*="hint--"]:after {
  position: fixed !important;
  width: 200px;
  transform: none !important;
  bottom: 0px;
  left: 0px;
  margin: 0 auto;
  right: 0px;
  text-align: center;
  background: radial-gradient(circle, darkred 30%, #131418)!important;
  border-radius: 100vw 100vw 0 0;
}

#Out {
  background: black;
  color: white;
  width: 200px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}

#Out>span {
  margin: 0 auto;
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.4.0/hint.min.css" rel="stylesheet" />

<div id="Out">
  <span contenteditable="true" class="hint--" aria-label="Tool tip text">
Lorem ipsum dolor sit amet, sit no mentitum eleifend. Rebum detracto intellegebat vel ei, pro ne erroribus quaerendum. Malorum nonumes id cum, mei case meliore ut, et enim platonem nec. Eu est option qualisque efficiantur, te errem mucius dolorum nec, putent quaerendum et sea. Ex stet dignissim democritum sed, has te putant ceteros blandit.

Adhuc sanctus intellegat no his, falli viris ei mei, id eum tritani virtute. Iudico audire urbanitas at est, graece antiopam constituam mei eu. Vero animal salutatus nam ea. Essent intellegam cu sea, per legendos suavitate an. Duo sale omittantur definitionem ea, affert quaeque deseruisse ea pro. Vix errem intellegam scripserit eu, sit ex suscipiantur mediocritatem conclusionemque, sonet insolens ex nec.

Velit delenit pri in, ne his nemore torquatos. Ex postea fabulas signiferumque vix, consul postea mea cu, an choro verterem sea. Quod assum vis et. An nam affert quidam. Duo tation patrioque in, ut ludus nihil vel.</span>
</div>

Answer 4

以下是我在聊天中分享的最终答案。

＆＃13;

body {
  background: pink;
  padding: 40px;
  font-family: arial;
}

#Out {
  background: #333;
  line-height: 22px;
  color: white;
  width: 300px;
  height: 200px;
  overflow: scroll;
  padding: 10px;
}

.hover-div {
  position: relative;
  cursor: pointer;
  background: white;
  color: #333;
  margin: 8px 0px;
}

.tooltip {
  position: absolute;
  display: none;
  left: 0px;
  border-bottom: 1px dotted black;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 100;
}

.hover-div:hover .tooltip {
  display: block;
  top: -40px;
}

＆＃13;

<div class="outContainer">
  <div id="Out" contenteditable="true">
    <div class="hover-div">Hover over me
      <div class="tooltip">Tooltip text</div>
    </div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    <div class="hover-div">Hover over me
      <div class="tooltip">Tooltip text</div>
    </div>
    Additional text goes here It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  </div>
</div>

＆＃13;

注意：根据需要通过向左，向右，向上播放来调整工具提示的位置。

Codepen：https://codepen.io/Omi236/pen/KqbQoO?editors=1100

使用Scroll溢出文本但溢出html元素

4 个答案: