Overflow Text with Scroll but overflow html element out of it

Question

my english is not the best but i hope to write the question understandable.

I´m trying to make a div text editable, normally the text will overflow the size of the div so i need to keep the text in the div with overflow:scroll but i want to acept html elements in that div, especially a tooltip. And this html-element (the tooltip) normally go out of the div but if i use overflow:scroll to manage the text i lose the property to let the tooltip overflow. Here is an image that ilustrate what happen:

There is the codepen with the code whate the image show: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>`

In conclusion i need to let the tooltip overflow but not the text.

Again sorry for my bad english, and i´ll appreciate any tip or kind of help :).

Answer 1

Here is the final answer whose link I shared in chat.

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;
}

<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>

Note: Adjust position of tooltip by playing with left, right, top as per your needs.

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

Answer 2

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 3

Updated: Here is your solution:

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>

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

Answer 4

The issue is related to the positioning of .tooltiptext. In the first example, the parent which has relative positioning, is closed after the span. In the second example there is a closing div missing. When I add it to the end and change the position of the tooltip, it works fine.

#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>