Come si modificano la larghezza e l'altezza dei suggerimenti di Bootstrap su Twitter?

Ho creato una descrizione comandi utilizzando Twitter Bootstrap.

La descrizione comandi viene visualizzata con tre righe. Tuttavia, vorrei visualizzare la descrizione comandi con una sola riga.

Come posso modificare la larghezza della descrizione comando? È specifico per Twitter Bootstrap o per i tooltip stessi?

Sostituisci semplicemente bootstrap.css

Il valore predefinito in BS2 è max-larghezza: 200 px; Quindi puoi aumentarlo con qualsiasi cosa tu voglia.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

Su BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

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-widthdichiara 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:

1. 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 condata-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)
2. Se sei intenzionato a usare questo concetto di tooltip a una riga, copri il tuo sei usando una @mediaquery 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;
    }
}

Dovresti sovrascrivere le proprietà usando il tuo css. così:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

il selettore sceglie il div in cui si trova il tooltip (il tooltip è aggiunto da javascript e di solito non appartiene a nessun contenitore.

Definisci la larghezza massima con "importante!" e usa data-container = "body"

File CSS

.tooltip-inner {
    max-width: 500px !important;
}

Tag HTML

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

JS script

$('.tooltiplink').tooltip();

Per risolvere il problema della larghezza, utilizzare invece il codice seguente.

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

esempio: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

Un'altra soluzione; creare una nuova classe (ad es. a livello di tooltip) in CSS:

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

Usa questa classe su elementi in cui desideri descrizioni comandi estese:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

La descrizione comandi Bootstrap genera markup sotto l'elemento che contiene la descrizione comandi, quindi l'HTML appare effettivamente simile a questo dopo la generazione del markup:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

Il CSS lo utilizza per accedere all'elemento adiacente (+) a .tooltip-wide e da lì passa a .tooltip-inner, prima di applicare l'attributo max-width. Ciò influirà solo sugli elementi che utilizzano la classe .tooltip-wide, tutti gli altri suggerimenti rimarranno inalterati.

È possibile modificare la classe css .tooltip-inner in bootstrap.css. La larghezza massima predefinita è 200 px. È possibile modificare la larghezza massima in base alla dimensione desiderata.

dopo alcuni esperimenti, questo ha funzionato meglio per me:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

Sostituisci l'impostazione predefinita in base max-widthalle tue esigenze.

.tooltip-inner {
  max-width: 350px;
}

Quando la larghezza massima non funziona (opzione 1)

Se la larghezza massima non funziona, è possibile utilizzare una larghezza impostata. Questo va bene, ma i suggerimenti non verranno più ridimensionati per adattarsi al testo. Se non ti piace, passa all'opzione 2.

.tooltip-inner {
  width: 350px;
}

Gestire correttamente i piccoli contenitori (opzione 2)

Poiché Bootstrap aggiunge la descrizione comando come fratello della destinazione, è vincolata dall'elemento contenitore. Se l'elemento contenente è più piccolo del tuo max-width, alloramax-width non funzionerà.

Quindi, quando max-widthnon funziona, devi solo cambiare container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

Suggerimento pro: il contenitore può essere qualsiasi selettore, il che è utile quando si desidera sovrascrivere gli stili solo con alcune descrizioni comandi.

Imposta la classe sul div tooltip principale e per il tooltip interno

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

Si prega di fare riferimento al seguente post. La risposta di cmcculloh ha funzionato per me. https://stackoverflow.com/posts/31683500/edit

Come accennato nella documentazione , il modo più semplice per assicurarsi che il tooltip non si avvolga affatto è usare

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

Con questo, non devi preoccuparti dei valori di dimensione o qualcosa del genere. Il problema principale è che se si dispone di una riga di testo super lunga, si spegne semplicemente lo schermo (come si può vedere nell'esempio JSBin ).

BS3:

.tooltip-inner { width:400px; max-width: 400px; }

Su Bootstrap 4 e se non vuoi modificare tutta la larghezza delle descrizioni comandi, puoi utilizzare un modello specifico per la descrizione comandi che desideri:

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

Prova questo codice,

.tooltip-inner {
     max-width:350px !important;
}

Ho avuto lo stesso problema, comunque tutte le risposte più diffuse: cambiare .tooltip-inner{width}per il mio compito non è riuscito a fare bene il lavoro. Come per altri tooltip (cioè più corti), la larghezza fissa era troppo grande. Ero pigro nel scrivere template / classi HTML separati per zilioni di tooltip, quindi ho appena sostituito tutti gli spazi tra le parole con  in ogni riga di testo.

Avevo bisogno di regolare la larghezza di alcuni suggerimenti. Ma non un ambiente generale. Quindi ho finito per farlo:

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

html

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

L'impostazione della larghezza massima della classe tooltip-inner non ha funzionato per me , sto usando bootstrap 3.2

Alcuni di come l' impostazione della larghezza massima funziona solo se si imposta la larghezza della classe genitore (.tooltip).

Ma poi tutte le descrizioni comandi diventano le dimensioni specificate. Quindi ecco la mia soluzione:

aggiungi una larghezza alla classe genitore:

.tooltip {
  width:400px;
}

Quindi aggiungi la larghezza massima e cambi la visualizzazione in blocco in linea, in modo che non occupi l'intero spazio

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

Il mio in cui tutte le lunghezze variabili e una larghezza massima impostata non funzionavano per me, quindi impostare il mio CSS al 100% ha funzionato come un fascino.

.tooltip-inner {
    max-width: 100%;
}

Con Bootstrap 4 che uso

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

in bootstrap 3.0.3 puoi farlo modificando la classe popover

.popover {
    min-width: 200px;
    max-width: 400px;
}