Wie können Sie die Breite und Höhe der Tooltips von Twitter Bootstrap ändern?

162

Ich habe einen Tooltip mit Twitter Bootstrap erstellt.

Der Tooltip wird mit drei Zeilen angezeigt. Ich möchte den Tooltip jedoch nur mit einer Zeile anzeigen.

Wie ändere ich die Breite des Tooltips? Ist dies spezifisch für Twitter Bootstrap oder für Tooltips selbst?

onejigtwojig
quelle
1
Können Sie vielleicht eine Antwort akzeptieren? Dies wird auch anderen helfen.
MERose

Antworten:

209

Überschreiben Sie einfach bootstrap.css

Der Standardwert in BS2 ist max-width: 200px; So können Sie es mit allem erhöhen, was Ihren Anforderungen entspricht.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}
Valentin Despa
quelle
13
max-widthfunktioniert bei mir nicht, widthtut es aber . Getestet auf Chrome und IE9. Irgendeine Ahnung?
Rosdi Kasim
2
In meinem Fall funktionierte das Festlegen der maximalen Breite und Breite gut, da .tooltip-inner kleiner als die maximale Breite (200px) war, obwohl es viele Texte enthielt.
Nobu
Fügen Sie einfach! Wichtig hinzu, so funktioniert es bei maximaler Breite: 350px! Wichtig;
Sohail Anwar
1
Für alle, die immer noch Probleme mit max-widthder folgenden Antwort von @ knobli haben und diese nicht sehen, verwenden Sie sie bitte data-container="body"in Ihrem HTML-Element.
Kips15
Das Ändern des CSS sollte der letzte Ausweg sein. Jquery bietet Funktionen zum Ändern des Erscheinungsbilds des Tooltips. Warum also nicht?
E10
42

Auf BS3

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

Mir ist klar, dass dies eine sehr alte Frage ist, aber wenn ich hier gelandet bin, werden es auch andere tun. Also dachte ich, ich wiege mich ein.

Wenn der Tooltip nur auf eine Zeile reagieren soll, unabhängig davon, wie viel Inhalt Sie hinzufügen, muss die Breite flexibel sein. Bootstrap initiiert jedoch den Tooltip auf eine Breite, sodass Sie mindestens angeben müssen, wie breit diese Breite sein soll, und sie ab dieser Größe flexibel gestalten müssen. Folgendes empfehle ich:

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

Das min-widthdeklariert eine Startgröße. Im Gegensatz zur maximalen Breite, wie einige andere vorschlagen würden, die eine Stoppbreite deklariert . Entsprechend Ihrer Frage sollten Sie keine endgültige Breite angeben, da sonst der Inhalt Ihres Tooltips an diesem Punkt umbrochen wird. Stattdessen verwenden Sie eine unendliche oder flexible Breite. max-width: 100%;stellt sicher, dass der Tooltip, sobald er mit einer Breite von 100 Pixel gestartet wurde, wächst und sich an Ihren Inhalt anpasst, unabhängig von der Menge des darin enthaltenen Inhalts.

MERKEN SIE SICH Tooltips sind nicht dazu gedacht, viel Inhalt zu enthalten. Es könnte funky aussehen, wenn Sie eine lange Schnur über den gesamten Bildschirm hätten. Und es wird sich definitiv auf Ihre reaktionsschnellen Ansichten auswirken, insbesondere auf das Smartphone (320 Pixel Breite).

Ich würde zwei Lösungen empfehlen, um dies zu perfektionieren:

  1. Halten Sie Ihren Tooltip-Inhalt auf ein Minimum, damit er nicht breiter als 320 Pixel ist. Und selbst wenn Sie dies tun, müssen Sie sich daran erinnern, ob Sie den Tooltip rechts auf dem Bildschirm und mit platziert habendata-placement:right Inhalt auf Smartphones nicht sichtbar Daher hat Bootstrap sie ursprünglich so konzipiert, dass sie auf den Inhalt reagieren und dies zulassen wickeln)
  2. Wenn Sie dieses einzeilige Tooltip-Konzept unbedingt verwenden möchten, decken Sie Ihre sechs ab, indem Sie eine @mediaAbfrage verwenden, um Ihren Tooltip an die Smartphone-Ansicht anzupassen . So was:

Meine Demo HIER zeigt die Flexibilität und Reaktionsfähigkeit der Tooltips in Abhängigkeit von der Inhaltsgröße und der Größe der Geräteanzeige

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}
LOTUSMEN
quelle
23

Sie sollten die Eigenschaften mit Ihrem eigenen CSS überschreiben. wie so:

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

Der Selektor wählt das Div aus, in dem sich der Tooltip befindet (Tooltip wird per Javascript hinzugefügt und gehört normalerweise keinem Container an.

nglinh
quelle
2
Nur neugierig, gibt es einen bestimmten Grund, warum Sie den überschreibenden Stil als 'div [class = "tooltip-inner"]' und nicht als einfaches 'div.tooltip-inner' definiert haben?
Slawek
6
Ich habe diesen Code geschrieben, als ich noch sehr neu in CSS war, daher kann ich mich nicht erinnern, aus welchem ​​lächerlichen Grund ich ihn so geschrieben habe haha
nglinh
21

Definieren Sie die maximale Breite mit "wichtig!" und benutze data-container = "body"

CSS-Datei

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

HTML-Tag

<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-Skript

$('.tooltiplink').tooltip();
knobli
quelle
18
data-container="body"allein hat es für mich getan. Vielen Dank!
Izhaki
17

Verwenden Sie stattdessen den folgenden Code, um das Breitenproblem zu beheben.

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

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

戈 晓伟
quelle
4
Die beste Antwort meiner Meinung nach, da das Ändern des Bootstrap-CSS nicht enthalten ist.
Tim Scarborough
1
Dies ist die beste Antwort für mich, aber dies beantwortet nicht die Frage
Bengala
Dies ist die beste Lösung, denke ich. Stattdessen wird die Tooltip-Konfiguration verwendet, um CSS-Bootstrap zu überschreiben.
César León
Dies ist von FAAAR die beste Antwort. Jquery bietet Funktionen für alle möglichen Aufgaben im Tooltip. Warum also nicht? Das Ändern des CSS sollte der letzte Ausweg sein.
E10
10

Eine andere Lösung; Erstellen Sie eine neue Klasse (z. B. Tooltip-weit) in CSS:

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

Verwenden Sie diese Klasse für Elemente, für die Sie umfangreiche QuickInfos benötigen:

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

Der Bootstrap-Tooltip generiert ein Markup unterhalb des Elements, das den Tooltip enthält, sodass der HTML-Code nach dem Generieren des Markups tatsächlich ungefähr so ​​aussieht:

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

Das CSS verwendet dies, um auf das benachbarte Element (+) zu .tooltip-wide zuzugreifen und von dort zu .tooltip-inner zu navigieren, bevor das Attribut max-width angewendet wird. Dies wirkt sich nur auf Elemente aus, die die Klasse .tooltip-wide verwenden. Alle anderen QuickInfos bleiben unverändert.

Sind
quelle
2
Tolle Lösung, da Sie auswählen können, welche Tooltips Sie verwenden möchten.
Will Schönberger
1
In Bootstrap 4 wird der Tooltip an den Body angehängt. Mit data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"und .tooltip-wide { max-width: 100%; min-width: 80%; }kann man es jedoch zum Laufen bringen.
Matteo Ferla
Dies ist das erste Beispiel aus der Praxis, das ich bei der Verwendung von Vorlagen mit BS4-Tooltips gesehen habe. Schöne Demo und einfaches Hinzufügen von benutzerdefinierten Klassen.
Klewis
8

Sie können die CSS-Klasse .tooltip-inner in bootstrap.css bearbeiten. Die maximale Standardbreite beträgt 200px. Sie können die maximale Breite auf die gewünschte Größe ändern.

onejigtwojig
quelle
Dies ist großartig, um die Breite anzupassen! Vielen Dank! Dies zusammen mit der obigen Antwort ist die vollständige Lösung!
ATSiem
6
Wie @nglinh sagte: "Es ist nicht wirklich zu empfehlen". Sie möchten beim Aktualisieren von Bootstrap nicht alle Ihre Hacks im Auge behalten.
Valentin Despa
7

Nach einigem Experimentieren funktionierte dies am besten für mich:

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

Überschreiben Sie einfach die Standardeinstellung max-widthauf das, was Ihren Anforderungen entspricht.

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

Wenn die maximale Breite nicht funktioniert (Option 1)

Wenn die maximale Breite nicht funktioniert, können Sie stattdessen eine festgelegte Breite verwenden. Dies ist in Ordnung, aber die Größe Ihrer QuickInfos wird nicht mehr an den Text angepasst. Wenn Ihnen das nicht gefällt, fahren Sie mit Option 2 fort.

.tooltip-inner {
  width: 350px;
}

Richtiger Umgang mit kleinen Behältern (Option 2)

Da Bootstrap den Tooltip als Geschwister des Ziels anfügt, wird er durch das enthaltende Element eingeschränkt. Wenn das enthaltende Element kleiner als Ihr ist max-width, dannmax-width funktioniert es nicht.

Wenn max-widthdies nicht funktioniert, müssen Sie nur Folgendes ändern container:

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

Pro-Tipp: Der Container kann eine beliebige Auswahl sein. Dies ist hilfreich, wenn Sie Stile nur mit wenigen QuickInfos überschreiben möchten.

Anson
quelle
4

Setzen Sie die Klasse auf den Haupt-Tooltip div und für den inneren Tooltip

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
Junior
quelle
Sollte es nicht min-width sein?
Rippo
4

Bitte beziehen Sie sich auf den folgenden Beitrag. cmccullohs Antwort hat bei mir funktioniert. https://stackoverflow.com/posts/31683500/edit

Wie in der Dokumentation angedeutet , können Sie am einfachsten sicherstellen, dass Ihr Tooltip überhaupt nicht verpackt wird

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

Damit müssen Sie sich keine Gedanken über Bemaßungswerte oder ähnliches machen. Das Hauptproblem besteht darin, dass eine super lange Textzeile nur vom Bildschirm verschwindet (wie Sie im JSBin-Beispiel sehen können ).

Rajasekar Kalisamy
quelle
2

BS3:

.tooltip-inner { width:400px; max-width: 400px; }
Bis Hess
quelle
2

Wenn Sie in Bootstrap 4 nicht die Breite aller QuickInfos ändern möchten, können Sie eine bestimmte Vorlage für die gewünschte QuickInfo verwenden:

<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>
Vincent Decaux
quelle
1

Versuchen Sie diesen Code,

.tooltip-inner {
     max-width:350px !important;
}
Ragas Lamir
quelle
1

Ich hatte das gleiche Problem, aber alle gängigen Antworten - sich .tooltip-inner{width}für meine Aufgabe zu ändern , haben den Job nicht richtig gemacht. Wie bei anderen (dh kürzeren) Tooltips war die feste Breite zu groß. Ich war faul, separate HTML-Vorlagen / Klassen für zig Millionen Tooltips zu schreiben, also habe ich einfach alle Leerzeichen zwischen Wörtern durch &nbsp;in jeder Textzeile ersetzt.

Ignas
quelle
1

Ich musste die Breite einiger Tooltips anpassen. Aber keine Gesamteinstellung. Also habe ich folgendes gemacht:

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." />
Julesezaar
quelle
0

Das Einstellen der maximalen Breite der Klasse tooltip-inner hat bei mir nicht funktioniert , ich verwende Bootstrap 3.2

Einige Funktionen zum Festlegen der maximalen Breite funktionieren nur, wenn Sie die Breite der übergeordneten Klasse (.tooltip) festlegen.

Dann haben alle QuickInfos die von Ihnen angegebene Größe. Also hier ist meine Lösung:

Fügen Sie der übergeordneten Klasse eine Breite hinzu:

.tooltip {
  width:400px;
}

Dann fügen Sie die maximale Breite hinzu und ändern die Anzeige in Inline-Block, damit sie nicht den gesamten Raum einnimmt

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}
Daniel
quelle
Dies schafft Chaos bei der Ausrichtung des Tooltips.
Ben
0

Meins, wo alle variablen Längen und eine festgelegte maximale Breite für mich nicht funktionieren würden, also funktionierte es wie ein Zauber, mein CSS auf 100% zu setzen.

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

Mit Bootstrap 4 benutze ich

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

In Bootstrap 3.0.3 können Sie dies tun, indem Sie die Popover-Klasse ändern

.popover {
    min-width: 200px;
    max-width: 400px;
}
Ekim
quelle
3
Die .popover-Klasse gilt nicht für QuickInfos.
Adriaan Tijsseling