W jaki sposób ustawić tylko jedną określoną etykietkę z opcją "kąt-ui-bootstrap", aby była szersza?

Question

W mojej aplikacji AngualrJS używamy etykiet narzędziowych typu "angle-ui-bootstrap".

Mam jedną etykietkę narzędzi, która musi pomieścić długi tekst. Odpowiedź na pytanie Displaying long text in Bootstrap tooltip SO pokazuje mi jak zrobić podpowiedzi iść szerszy ...

... ale co jeśli nie chcę, aby wszystkie podpowiedzi szerszy, tylko jeden konkretny podpowiedź?

(Uwaga: angularjs 1.2.24, jQuery dostępne ... ale wolałbym po prostu być w stanie zastosować styl do tej jednej podpowiedzi niż uzyskać bardziej skomplikowane)

Answer 1

Jeśli natomiast masz tooltip-append-to-body="true", można użyć następującego zmodyfikowaną wersję @ kodu Daryn za

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

Dopóki ty nie „t mieć tooltip-append-to-body="true", można użyć następującego CSS (w tym przykładzie, dzięki czemu etykietka Maksymalna szerokość 400px):

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> 

---

Kluczem w CSS powyżej jest selektor sąsiedztwie rodzeństwo, +.

To dlatego, jak zapewne wiesz, po najechaniu element1, tooltip dodaje się jako div poelement1, w przybliżeniu tak:

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

Zatem selektor CSS .tooltip-400max + .tooltip wybierze tylko tę wstawioną etykietkę, która jest sąsiednim sibilingiem. Styl stylizacji maks. Szerokości potomka .tooltip-inner nie wpłynie na wszystkie etykiety narzędzi, a jedynie podpowiedzi dla elementów o klasie tooltip-400max.