My English isn't the greatest, but I hope to convey the question clearly.
I am attempting to create an editable text within a div. Typically, the text will overflow the size of the div, so I need to contain the text in the div using overflow:scroll. However, I also want to allow HTML elements in that div, specifically a tooltip. The issue is that this HTML element (the tooltip) tends to extend beyond the boundaries of the div. Using overflow:scroll to manage the text causes the tooltip to be cut off. Here is an image illustrating the problem:
https://i.sstatic.net/GHTEr.png
You can view the corresponding codepen with the code shown in the image here: 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;
}
.tooltip .tooltiptext {
visibility: hidden;
// More CSS...
}
/* Additional CSS rules... */
<div id="Out" contenteditable="true">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<!-- Long text goes here -->
</div>
<div id="noOut" contenteditable="true">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span></div>
<!-- Another long text section goes here -->
</div>In conclusion, my goal is to have the tooltip overflow while containing the main text within the div.
Once again, apologies for any language barriers, and I would greatly appreciate any helpful tips or advice :).