Elemento assoluto posizionato CSS, larghezza automatica esterna ai limiti del genitore?

Question

Quindi, ho il mio elemento genitore posizionato relativo, in modo da consentire che un elemento del tooltip sia posizionato al suo interno, nella parte superiore. Sono consapevole che è necessario aggiungere "left: 0, right: 0", in modo che la larghezza dell'elemento possa ancora essere impostata su auto, cosa che ho fatto. Tuttavia, il mio elemento genitore ha una larghezza fissa, a cui viene trattenuto il suggerimento, quindi la larghezza automatica non può uscire da essa, c'è un modo per aggirare questo?

CSS:

.parent { 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 

.tooltip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    text-align: center; 
    width: auto; 
    padding: 5px 10px; 
} 

elementi:

<div class="parent"> 
    <div class="tooltip">Text goes here</div> 
</div> 

No JS per favore, alla ricerca di una soluzione CSS, grazie!

Answer 1

Non impostare sia left e right su .tooltip, e l'impostazione white-space: nowrap dovrebbe farlo:

.tooltip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    text-align: center; 
    width: auto; 
    padding: 5px 10px; 
    white-space: nowrap; 
} 

Working example.

È necessario utilizzare this solution per centrare un elemento assoluto. Richiede un elemento aggiuntivo, però. Demo

Answer 2

Non ho ancora visto questo problema, ma quello che penso stia succedendo è che width: auto; eredita automaticamente le proprietà del suo genitore. Pertanto, è necessario inserire un numero (width: 50px;) o una percentuale (width: 50%).

Answer 3

Se .parent può essere fatto in linea, si potrebbe fare .tooltip rendono come un tavolo e sarà AutoSize adattare il suo contenuto, ma a differenza con l'uso di white-space:nowrap, sarebbe anche sostenere un max-width.

.parent { 
    display: inline; 
    position: relative; 
} 

.tooltip { 
    position: absolute; 
    display: table; 
    top: 0; 
    left: 0; 
    text-align: center; 
    padding: 5px 10px; 
    max-width: 200px; 
}