Wrap text onto next line if no more space - html

Question

I have this tooltip when hovering over the info icon next to the header. I can't make it wrap text to the next line if there's not enough space to display all of it. I've tried so many different versions of white-space and line-break I've run out of ideas.
On top of that IE doesn't display full width at all. I don't want to give my div a fixed width. I want it to dynamically wrap when there's no more space in the parent.
My desired result would be something like that in both IE and Chrome
.info-tooltip {
position: relative;
display: inline;
top: 1px;
cursor: default;
white-space: pre;
}
.info-tooltip:before {
content: url("https://image.flaticon.com/icons/svg/685/685815.svg");
width: 20px;
height: 20px;
display: inline-block;
}
/* Tooltip text */
.info-tooltip .info-tooltip-text {
visibility: hidden;
background-color: #0BC6DD;
color: #fff;
border-radius: 4px;
font-size: 14px;
/* Position the tooltip text */
position: absolute;
top: 37px;
left: -50px;
display: table;
z-index: 1;
padding: 8px 8px 4px 8px ;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.info-tooltip .info-tooltip-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 60px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #0BC6DD transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.info-tooltip:hover .info-tooltip-text {
visibility: visible;
opacity: 1;
}
.info-tooltip .info-tooltip-text p {
padding-bottom: 4px;
margin: 0;
font-weight: 100;
}
<h1>There is a tooltip next to me <i class="info-tooltip"/>
<div class="info-tooltip-text">
<p>This is the actual tooltip to be displayed. A bit longer than expected. Should wrap where necessary.</p>
</div>
</i></h1>

Answer 1

added
width: 250px;
white-space: normal;
to .info-tooltip .info-tooltip-text p
.info-tooltip {
position: relative;
display: inline;
top: 1px;
cursor: default;
white-space: pre;
}
.info-tooltip:before {
content: url("https://image.flaticon.com/icons/svg/685/685815.svg");
width: 20px;
height: 20px;
display: inline-block;
}
/* Tooltip text */
.info-tooltip .info-tooltip-text {
visibility: hidden;
background-color: #0BC6DD;
color: #fff;
border-radius: 4px;
font-size: 14px;
/* Position the tooltip text */
position: absolute;
top: 37px;
left: -50px;
display: table;
z-index: 1;
padding: 8px 8px 4px 8px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.info-tooltip .info-tooltip-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 60px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #0BC6DD transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.info-tooltip:hover .info-tooltip-text {
visibility: visible;
opacity: 1;
}
.info-tooltip .info-tooltip-text p {
padding-bottom: 4px;
margin: 0;
font-weight: 100;
width: 250px;
white-space: normal;
}
<h1>There is a tooltip next to me <i class="info-tooltip" />
<div class="info-tooltip-text">
<p>This is the actual tooltip to be displayed. A bit longer than expected. Should wrap where necessary.</p>
</div>
</i>
</h1>