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


163

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?


1
Puoi forse accettare una risposta? Questo aiuterà anche gli altri.
MERose,

Risposte:


211

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; 
}

13
max-widthnon funziona per me, ma widthfunziona. Testato su Chrome e IE9. Qualche idea?
Rosdi Kasim,

2
Nel mio caso, l'impostazione sia della larghezza massima che della larghezza ha funzionato bene poiché .tooltip-inner era inferiore alla larghezza massima (200px) sebbene avesse un sacco di testi.
Nobu,

Basta aggiungere! Important in questo modo funzionerà con larghezza massima: 350px! Important;
Sohail Anwar,

1
Per chiunque abbia ancora problemi con max-widthe non veda la risposta di @ knobli qui sotto, si prega di utilizzare data-container="body"nel proprio elemento HTML.
kips15

La modifica del CSS dovrebbe essere l'ultima risorsa. Jquery fornisce funzionalità per modificare l'aspetto della descrizione comandi, quindi perché non utilizzarlo?
E10,

42

Su BS3

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

28

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;
    }
}

23

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.


2
Solo curioso, c'è qualche motivo particolare per cui hai definito lo stile prevalente come 'div [class = "tooltip-inner"]' e non come semplice 'div.tooltip-inner'?
slawek,

6
Ho scritto quel codice quando ero molto nuovo in CSS, quindi non riesco a ricordare quale ragione ridicola mi abbia fatto scrivere in quel modo haha
nglinh

21

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();

18
data-container="body"da solo l'ha fatto per me. Grazie!
Izhaki,

17

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/


4
La migliore risposta secondo me perché non include la modifica del CSS bootstrap.
Tim Scarborough,

1
Questa è la risposta migliore per me, ma non risponde alla domanda
Bengala

Questa è la migliore soluzione che penso. Utilizza la configurazione della descrizione comandi invece di ignorare CSS Bootstrap.
César León,

Questa è la risposta migliore di FAAAR. Jquery offre funzionalità per eseguire qualsiasi tipo di operazione nella descrizione comandi, quindi perché non utilizzarla? La modifica del CSS dovrebbe essere l'ultima risorsa.
E10,

10

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.


2
Ottima soluzione perché puoi scegliere quali tooltip vuoi usare.
Will Schoenberger,

1
In bootstrap 4, la descrizione comandi viene aggiunta al corpo. Tuttavia, con data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"e .tooltip-wide { max-width: 100%; min-width: 80%; }uno può farlo funzionare.
Matteo Ferla,

Questo è il primo esempio di vita reale che ho visto nell'uso di modelli con tooltip BS4. Bella demo e facilità di aggiunta anche di classi personalizzate.
Klewis,

8

È 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.


Questo è fantastico per regolare la larghezza! Grazie! Questo insieme alla risposta sopra è la soluzione completa!
ATSiem,

6
Come diceva @nglinh: "Non è davvero raccomandato". Non vuoi tenere traccia di tutti i tuoi hack durante l'aggiornamento di bootstrap.
Valentin Despa,

7

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 */ 
}

6

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.


4

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

div.tooltip {
    width: 270px;
}

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

Non dovrebbe essere la larghezza minima?
Rippo,

4

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 ).



2

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>

1

Prova questo codice,

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

1

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 &nbsp;in ogni riga di testo.


1

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." />

0

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;
}

Questo crea caos con l'allineamento della descrizione comandi.
Ben

0

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%;
}

0

Con Bootstrap 4 che uso

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

-1

in bootstrap 3.0.3 puoi farlo modificando la classe popover

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

3
La classe .popover non si applica ai suggerimenti.
Adriaan Tijsseling,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.