Mi rendo conto che questa è una domanda molto antica, ma se atterro qui, lo faranno anche gli altri. Quindi ho pensato di pesare.
Se si desidera che la descrizione comandi risponda a una sola riga indipendentemente dalla quantità di contenuto aggiunta ad essa, la larghezza deve essere flessibile. Tuttavia, Bootstrap avvia il tooltip su una larghezza, quindi devi almeno dichiarare quale sarà quella larghezza e renderla flessibile da quella dimensione in su. Questo è ciò che consiglio:
.tooltip-inner {
min-width: 100px;
max-width: 100%;
}
L' min-width
dichiara una dimensione di partenza. A differenza della larghezza massima, come suggerirebbero alcuni altri, che dichiara una larghezza di arresto . Secondo la tua domanda, non dovresti dichiarare una larghezza finale o il tuo contenuto della descrizione comandi alla fine si concluderà a quel punto. Invece, usi una larghezza infinita o una larghezza flessibile. max-width: 100%;
farà in modo che una volta avviata la descrizione comandi a una larghezza di 100 px, aumenterà e si adatterà al contenuto indipendentemente dalla quantità di contenuto presente.
MANTENERE IN MENTE Le
descrizioni dei comandi non sono destinate a contenere molti contenuti. Potrebbe sembrare strano se avessi una lunga stringa su tutto lo schermo. E avrà sicuramente un impatto nelle tue visualizzazioni reattive, in particolare smartphone (larghezza 320px).
Consiglierei due soluzioni per perfezionare questo:
- Mantenere il contenuto della descrizione comandi al minimo in modo da non superare 320 pixel di larghezza. E anche se lo fai, devi ricordare se hai la descrizione comandi posizionata a destra dello schermo e con
data-placement:right
, il contenuto della descrizione comando non sarà visibile negli smartphone (quindi perché Bootstrap inizialmente li ha progettati per rispondere ai suoi contenuti e consentirgli di impacco)
- Se sei intenzionato a usare questo concetto di tooltip a una riga, copri il tuo sei usando una
@media
query per reimpostare il tooltip per adattarlo alla vista dello smartphone. Come questo:
La mia demo QUI dimostra la flessibilità e la reattività delle descrizioni dei comandi in base alle dimensioni del contenuto e alle dimensioni di visualizzazione del dispositivo
@media (max-width: 320px) {
.tooltip-inner {
min-width: initial;
width: 320px;
}
}