bootstrap tooltip spezifische Breite für einen Tooltip

Question

Auf einem Formular habe ich ein Symbol mit einem bootstrap tooltip.

Der Tooltipp verwendet die Standard-CSS-Breite von 150px, die auf der gesamten Site verwendet wird.

Ich möchte die CSS-Breite dieser einen Tooltip von 150px zu 400px überschreiben, aber auch die 150px Breite für die anderen Tooltips, die auf der Testseite angezeigt werden, beibehalten.

Wie kann ich das erreichen?

Hier ist mein Code HTML-Formular-Code auf das Symbol und den Tooltip das Symbol hinzuzufügen:

$('#id_paragraph1_suggestion').after('<i id="id_icon_paragraph1_suggestion" class="fa fa-lightbulb-o blue_color icon_size18 no_decoration no_flicker_padding"></i>'); 

$("#id_icon_paragraph1_suggestion").tooltip({'html': true, 'title': 'Display suggestions to build your paragraph\n\nWe encourage you to mix & match different suggestions to complete your details.\n\nSimply replace the generic data with your own personalized information.'}); 

Hier ist mein CSS-Code die Breite der Tooltips zu setzen:

.tooltip-inner { 
    max-width: 900px; 
    white-space: pre-wrap 
} 
div[class="tooltip-inner"] { 
    max-width: 150px 
} 

Answer 1

OK , Hier ist die Antwort.

folgende Unterlagen an das .tooltip Attribut hinzufügen:

'template': '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner tooltip-suggestion"></div></div>' 

Also, das ist mein geändert (endgültige) HTML-Code (aus dem OP geändert):

$('#id_paragraph1_suggestion').after('<i id="id_icon_paragraph1_suggestion" class="fa fa-lightbulb-o blue_color icon_size18 no_decoration no_flicker_padding"></i>'); 

$("#id_icon_paragraph1_suggestion").tooltip({'template': '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner tooltip-suggestion"></div></div>', 'html': true, 'title': 'Display suggestions to build your paragraph\n\nWe encourage you to mix & match different suggestions to complete your details.\n\nSimply replace the generic data with your own personalized information.'}); 

Und das ist die veränderte CSS code:

.tooltip-inner { 
    max-width: 900px; 
    white-space: pre-wrap 
} 
div[class="tooltip-inner"] { 
    max-width: 150px 
} 
.tooltip-suggestion { 
    max-width: 400px; 
} 
div[class="tooltip-suggestion"] { 
    max-width: 400px 
} 

Ich hoffe, dass dies jemand helfen wird.

Ich referenzierte diese link für die Einstellungen.