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?
twitter-bootstrap
tooltip
onejigtwojig
quelle
quelle
Antworten:
Ü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.
quelle
max-width
funktioniert bei mir nicht,width
tut es aber . Getestet auf Chrome und IE9. Irgendeine Ahnung?max-width
der folgenden Antwort von @ knobli haben und diese nicht sehen, verwenden Sie sie bittedata-container="body"
in Ihrem HTML-Element.Auf BS3
quelle
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:
Das
min-width
deklariert 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:
data-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)@media
Abfrage 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
quelle
Sie sollten die Eigenschaften mit Ihrem eigenen CSS überschreiben. wie so:
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.
quelle
Definieren Sie die maximale Breite mit "wichtig!" und benutze data-container = "body"
CSS-Datei
HTML-Tag
JS-Skript
quelle
data-container="body"
allein hat es für mich getan. Vielen Dank!Verwenden Sie stattdessen den folgenden Code, um das Breitenproblem zu beheben.
Beispiel: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/
quelle
Eine andere Lösung; Erstellen Sie eine neue Klasse (z. B. Tooltip-weit) in CSS:
Verwenden Sie diese Klasse für Elemente, für die Sie umfangreiche QuickInfos benötigen:
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:
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.
quelle
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.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.
quelle
Nach einigem Experimentieren funktionierte dies am besten für mich:
quelle
Überschreiben Sie einfach die Standardeinstellung
max-width
auf das, was Ihren Anforderungen entspricht.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.
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-width
dies nicht funktioniert, müssen Sie nur Folgendes änderncontainer
:Pro-Tipp: Der Container kann eine beliebige Auswahl sein. Dies ist hilfreich, wenn Sie Stile nur mit wenigen QuickInfos überschreiben möchten.
quelle
Setzen Sie die Klasse auf den Haupt-Tooltip div und für den inneren Tooltip
quelle
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
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 ).
quelle
BS3:
quelle
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:
quelle
Versuchen Sie diesen Code,
quelle
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
in jeder Textzeile ersetzt.quelle
Ich musste die Breite einiger Tooltips anpassen. Aber keine Gesamteinstellung. Also habe ich folgendes gemacht:
CSS
JQuery
Html
quelle
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:
Dann fügen Sie die maximale Breite hinzu und ändern die Anzeige in Inline-Block, damit sie nicht den gesamten Raum einnimmt
quelle
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.
quelle
Mit Bootstrap 4 benutze ich
quelle
In Bootstrap 3.0.3 können Sie dies tun, indem Sie die Popover-Klasse ändern
quelle