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

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