Wie Überlauf hinzufügen: sichtbar für Tooltip, wenn Eltern Überlauf: versteckt?

Question

Ich habe diese Struktur html:

<h2 title="{{children.name}}">{{children.name | slice:0:45 }}{{ children.name.length > 45 ? '...':'' }} 
    <div class="tooltip"><i class="fa fa-info-circle"></i> 
     <span class="tooltiptext">Tooltip texdasjkdshjk dhasjkd haskd haskd haskjdh askdh ashkdjah jkds t</span> 
    </div> 
</h2> 

Auf h2 Ich habe overflow:hidden. Aber das Problem ist dann, dass ich keine volle tooltip Nachricht sehe. Irgendwelche Vorschläge wie kann ich das tun?

Das ist mein CSS:

h2{ 
    position:relative; 
    overflow:hidden; 
} 
.tooltip { 
    position: absolute; 
    display: inline-block; 
    right: 5px; 
    bottom: 2px; 
    pointer-events: all; 
    z-index: 999999999; 
    i{ 
     font-size: 25px; 
     color: lightblue; 
    } 
} 

.tooltip .tooltiptext { 
    visibility: hidden; 
    width: 300px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -60px; 
    opacity: 0; 
    transition: opacity 1s; 
} 

.tooltip .tooltiptext::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
} 

.tooltip:hover .tooltiptext { 
    visibility: visible; 
    opacity: 1; 
} 

Answer 1

einfach das Attribut relativ in der CSS zu h2 Element zu statisch ändern Position