부트 스트랩 툴팁에 긴 텍스트 표시

Question

트위터 부트 스트랩 툴팁에 긴 텍스트를 약간 표시하려고합니다. 아래 그림에서 알 수 있듯이 모든 일들이 매끄럽게 진행되지 않습니다. 누구든지 부트 스트랩 툴팁을 오버 플로우시키는 텍스트를 쉽게 고칠 수 있습니까?

편집 (추가 요청 코드) : 내 컨트롤러에서

: 내보기에서

<a href='" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "' " + 
      ((blTruncated) ? "class='auto-tooltip' title='" + productRow.ProductName.Replace("'", "") : "") + "'>" + 
      productName + "</a> 

:

$('.auto-tooltip').tooltip(); 

Answer 1

나는 약 아주 확실하지 않다 당신의 코드,
여기에 긴 공구 팁 값 :

요소 :

<a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a> 

JS :

$(document).ready(function() { 
    $("a").tooltip({ 
    'selector': '', 
    'placement': 'top', 
    'container':'body' 
    }); 
}); 

CSS는 :

/*Change the size here*/ 
div.tooltip-inner { 
    max-width: 350px; 
} 

데모 : on JsBin.com

Answer 2

으로 모든이와

 .tooltip-inner { 
      max-width: none; 
      white-space: nowrap; 
     } 

을 사용하는 것입니다 귀하의 툴팁이 포장하지 않도록 in the documentation, 가장 쉬운 방법 암시, 당신은 같은 치수 값 또는 아무것도에 대해 걱정할 필요가 없습니다 . 주요 문제는 텍스트가 매우 길어서 화면에서 벗어날 수 있다는 것입니다 (JSBin Example에서 볼 수있는 것처럼).

당신은 더 나은 결과를 위해이 소스를 사용할 수

Answer 3

: 당신이 툴팁의 템플릿을 수정하여 tooltip에 직접 스타일을 추가 할 수있는 스타일 시트에 .tooltip-inner을 스타일링하는 대신

.tooltip-inner { 
word-break: break-all; 
} 

Answer 4

을 .

대부분의 경우 요소에 스타일을 직접 적용 할 수는 없으므로 아마도 좋은 생각이 아니지만 이것이 유일한 옵션이거나 몇 가지 이유에서 가장 좋은 경우는 극히 드뭅니다 선택권. 특성으로

$(selector).tooltip({ 
    title: "Lorem ipsum ...", 
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>', 
}); 

또는 :

<span 
    data-toggle="tooltip" 
    title="Lorem ipsum ..." 
    data-template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>' 
    >Some abbreviation</span> 

$(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

template 옵션 : 툴팁을 만들 때 사용하는

자료 HTML.

툴팁의 title이 .tooltip-inner에 삽입됩니다.

.tooltip-arrow이 툴팁의 화살표가됩니다.

가장 바깥 쪽 래퍼 요소는 .tooltip 클래스 여야합니다. 에

기본값 : 대안으로

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

, 당신은 템플릿과 스타일 사용자 정의 클래스에 자신의 클래스를 추가 할 수 있습니다.

$(selector).tooltip({ 
    title: "Lorem ipsum ...", 
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>', 
}); 

.my-custom-tooltip { 
    max-width: none; 
}