Wie style ich nur einen bestimmten angular-ui-bootstrap-Tooltip, um breiter zu sein?

Question

In meiner AngualrJS-Anwendung verwenden wir angular-ui-bootstrap-Tooltips.

Ich habe einen Tooltip, der langen Text aufnehmen muss. Die Antwort SO Displaying long text in Bootstrap tooltip in Frage zeigt mir, wie Tooltips weiter gehen zu machen ...

... aber was ist, wenn ich nicht will alle Tooltips breiter machen, nur einen bestimmten Tooltip?

(Anmerkungen: AngularJS 1.2.24, jQuery verfügbar ... aber ich würde lieber nur in der Lage sein zu einen Stil auf das einzelne Tooltip gilt als komplizierter)

Answer 1

Wenn auf der anderen Seite Sie tooltip-append-to-body="true" haben, können Sie die folgende modifizierte Version von @ Code des Daryn verwenden

CSS

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

HTML

<div id="element1" 
    tooltip-append-to-body="true" 
    tooltip-class="tooltip-400max" 
    tooltip="{{ model.longTooltip }}">Text</div> 
<div>More page content</div> 

Answer 2

Solange Sie don ‚t haben tooltip-append-to-body="true", können Sie das folgende CSS (in diesem Beispiel die Breite Tooltip max machen 400px) verwenden:

CSS

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

HTML

<div id="element1" 
    class="tooltip-400max" 
    tooltip="{{ model.longTooltip }}">Text</div> 
<div>More page content</div> 

---

Der Schlüssel im CSS oben ist die benachbarten Selektors Geschwister, +.

Das ist, weil, wie Sie wahrscheinlich wissen, wenn Sie über element1 schweben, wird der Tooltip als div nachelement1, etwa wie folgt eingefügt:

<div id="element1" 
    class="tooltip-400max" 
    tooltip="{{ model.longTooltip }}">Text</div> 
<div class="tooltip fade in" and other stuff>...</div> 
<div>More page content</div> 

So ist die CSS-Selektor .tooltip-400max + .tooltip wählt nur diesen eingefügten Tooltip aus, der ein angrenzender Sibiling ist. Der Nachfolger max-width stying wirkt sich nicht auf alle Tooltips aus, sondern nur auf Tooltips für Elemente mit der Klasse tooltip-400max.