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

Twitter Bootstrap을 사용하여 툴팁을 만들었습니다.

툴팁은 세 줄로 표시됩니다. 그러나 툴팁을 한 줄만 표시하고 싶습니다.

툴팁의 너비를 어떻게 변경합니까? 이것은 Twitter Bootstrap 또는 툴팁 자체에만 해당됩니까?

bootstrap.css를 재정의하십시오.

BS2의 기본값은 max-width : 200px입니다. 따라서 필요에 따라 무엇이든 늘릴 수 있습니다.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

BS3에서

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

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

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

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

자신의 CSS를 사용하여 속성을 덮어 써야합니다. 이렇게 :

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

선택기는 툴팁이 유지되는 div를 선택합니다 (툴팁은 자바 스크립트로 추가되며 일반적으로 컨테이너에 속하지 않습니다.

"중요!"를 사용하여 최대 너비를 정의하십시오. data-container = "body"를 사용하십시오.

CSS 파일

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

HTML 태그

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

JS 스크립트

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

너비 문제를 해결하려면 다음 코드를 대신 사용하십시오.

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

예 : http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

다른 해결책; CSS에서 새 클래스를 작성하십시오 (예 : 툴팁 전체).

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

광범위한 툴팁을 원하는 요소에이 클래스를 사용하십시오.

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

부트 스트랩 툴팁은 툴팁이 포함 된 요소 아래에 마크 업을 생성하므로 마크 업이 생성 된 후 HTML은 실제로 다음과 같습니다.

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

CSS는이를 사용하여 max-width 속성을 적용하기 전에 인접한 요소 (+)를 .tooltip 전체에 액세스하고 .tooltip-inner로 이동합니다. 이것은 .tooltip-wide 클래스를 사용하는 요소에만 영향을 미치며 다른 모든 툴팁은 변경되지 않습니다.

bootstrap.css에서 .tooltip-inner CSS 클래스를 편집 할 수 있습니다. 기본 최대 너비는 200px입니다. 최대 너비를 원하는 크기로 변경할 수 있습니다.

몇 가지 실험을 한 후에 나에게 가장 효과적이었습니다.

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

max-width필요에 따라 기본값 을 무시하십시오 .

.tooltip-inner {
  max-width: 350px;
}

최대 너비가 작동하지 않는 경우 (옵션 1)

최대 너비가 작동하지 않으면 설정된 너비를 대신 사용할 수 있습니다. 괜찮지 만 툴팁이 더 이상 텍스트에 맞게 크기가 조정되지 않습니다. 마음에 들지 않으면 옵션 2로 건너 뜁니다.

.tooltip-inner {
  width: 350px;
}

작은 용기를 올바르게 다루기 (옵션 2)

Bootstrap은 툴팁을 대상의 형제로 추가하므로 포함 요소에 의해 제한됩니다. 포함하는 요소는보다 작은 경우 max-width, 다음max-width 작동하지 않습니다.

따라서 max-width작동하지 않으면 다음을 변경하면됩니다 container.

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

전문가 팁 : 컨테이너는 선택 기일 수 있으며, 몇 가지 툴팁에서 스타일을 재정의하려는 경우에 유용합니다.

클래스를 기본 툴팁 div 및 내부 툴팁으로 설정하십시오.

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

아래 게시물을 참조하십시오. cmcculloh의 답변이 저에게 효과적이었습니다. https://stackoverflow.com/posts/31683500/edit

문서에서 암시 된 것처럼 툴팁이 전혀 감싸지지 않도록하는 가장 쉬운 방법은 사용하는 것입니다

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

이를 통해 치수 값 또는 이와 유사한 것에 대해 걱정할 필요가 없습니다. 주요 문제는 매우 긴 텍스트 줄이 있으면 JSBin Example 에서 볼 수 있듯이 화면에서 사라집니다 .

BS3 :

.tooltip-inner { width:400px; max-width: 400px; }

Bootstrap 4에서 모든 툴팁 너비를 변경하지 않으려는 경우 원하는 툴팁에 특정 템플릿을 사용할 수 있습니다.

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

이 코드를 사용해보십시오

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

나는 같은 문제가 있었지만 모든 인기있는 답변- .tooltip-inner{width}내 작업에 대한 변경 이 제대로 작동하지 못했습니다. 다른 (즉, 더 짧은) 툴팁은 고정 너비가 너무 컸습니다. 수많은 툴팁에 대해 별도의 HTML 템플릿 / 클래스를 작성하는 것이 게으 르기 때문에 단어 사이의 모든 공백을  을 각 텍스트 줄로 습니다.

일부 툴팁의 너비를 조정해야했습니다. 그러나 전반적인 설정은 아닙니다. 그래서 나는 이것을 끝내었다.

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

HTML

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

내부 툴팁 의 최대 너비 를 설정해도 효과가 없었습니다. 부트 스트랩 3.2를 사용하고 있습니다.

일부 방법 은 부모 클래스의 폭을 설정하면 설정 최대 폭에만 작동 (.tooltip을).

그러나 모든 툴팁은 지정한 크기가됩니다. 그래서 여기 내 해결책이 있습니다.

부모 클래스에 너비를 추가하십시오.

.tooltip {
  width:400px;
}

그런 다음 최대 너비를 추가하고 디스플레이를 인라인 블록으로 변경하여 전체 공간을 차지하지 않습니다.

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

모든 가변 길이와 설정된 최대 너비가 작동하지 않는 CSS를 100 %로 설정하면 매력처럼 작동했습니다.

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

부트 스트랩 4로

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

부트 스트랩 3.0.3에서는 popover 클래스를 수정하여 수행 할 수 있습니다

.popover {
    min-width: 200px;
    max-width: 400px;
}