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

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?

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

Auf BS3

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

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

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.

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

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/

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.

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.

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

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

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

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

BS3:

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

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>

Versuchen Sie diesen Code,

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

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.

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

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

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

Mit Bootstrap 4 benutze ich

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

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

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