부트 스트랩 툴팁 특정 툴팁의 너비

Question

양식에 나는 bootstrap tooltip의 아이콘이 있습니다.

툴팁은 사이트 전체에 사용되는 150px의 표준 CSS 너비를 사용합니다.

이 툴팁의 CSS 너비를 150px에서 400px로 바꾸고 싶지만 테스트 사이트에 나타나는 다른 툴팁의 너비는 150px로 유지하고 싶습니다.

어떻게하면됩니까?

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

Answer 1

OK : 툴팁의 폭을 설정하는 내 CSS 코드가

여기

$('#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.'}); 

입니다 : 여기

는 아이콘과 아이콘에 툴팁을 추가하려면 코드 HTML 양식 코드 , 여기에 답이있다.

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

그래서,이 (영업 변경) 내 변경 (최종) HTML 코드입니다 :

$('#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.'}); 

는 그리고이 변경된 CSS입니다

는하여 .tooltip 속성에 다음을 추가 코드 :

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

누군가가 도움이되기를 바랍니다.

이 설정은 link을 참조했습니다.