[twitter-bootstrap] Twitter Bootstrap 툴팁의 너비와 높이를 어떻게 변경합니까?

나는 이것이 매우 오래된 질문이라는 것을 알고 있지만 여기에 착륙하면 다른 사람들도 마찬가지입니다. 그래서 나는 무게가 나가는 것을 알았습니다.

추가하는 내용의 양에 관계없이 툴팁이 한 줄에만 반응하도록하려면 너비가 유연해야합니다. 그러나 부트 스트랩은 툴팁을 너비로 시작하므로 최소한 너비를 선언하고 해당 크기에서 유연하게 만들어야합니다. 이것이 내가 추천하는 것입니다 :

.tooltip-inner {
    min-width: 100px;
    max-width: 100%;
}

는 min-width시작 크기를 선언합니다. 최대 너비와 반대로 다른 너비가 제안하는 것처럼 중지 너비를 선언합니다 . 귀하의 질문에 따르면, 최종 너비를 선언해서는 안됩니다. 그렇지 않으면 툴팁 내용이 결국 그 지점에서 줄 바꿈됩니다. 대신 무한 너비 또는 유연한 너비를 사용합니다. max-width: 100%;툴팁이 100px 너비로 시작된 후에는 툴팁의 내용량에 상관없이 컨텐츠에 맞게 조정되고 조정됩니다.

마음을 간직하십시오
도구 설명은 많은 내용을 담고 있지 않습니다. 전체 화면에 긴 줄이 있으면 펑키하게 보일 수 있습니다. 또한 반응 형보기, 특히 스마트 폰 (폭 320 픽셀)에 영향을 미칩니다.

이것을 완성하기 위해 두 가지 해결책을 권장합니다.

1. 폭이 320px를 초과하지 않도록 툴팁 내용을 최소로 유지하십시오. 이 작업을 수행하더라도 화면 오른쪽에 툴팁이 있고data-placement:right 도구 설명이 표시되어 있으면 도구 설명 내용이 스마트 폰에 표시되지 않습니다 (따라서 부트 스트랩이 처음에 해당 내용에 반응하도록 설계하고이를 허용하도록하는 이유) 싸다)
2. 이 한 줄 툴팁 개념을 사용하는 데 어려움이 있다면 @media쿼리를 사용 하여 스마트 폰보기에 맞게 툴팁을 재설정 하여 6 가지를 커버하십시오 . 이처럼 :

내 데모는 여기 컨텐츠 크기와 장치의 표시 크기도에 따라 툴팁에 유연성과 응답 성을 보여줍니다

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

답변

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

.tooltip-inner {
    max-width: 500px !important;
}

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

$('.tooltiplink').tooltip();

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>