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

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 */
}

---

자신의 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를 선택합니다 (툴팁은 자바 스크립트로 추가되며 일반적으로 컨테이너에 속하지 않습니다.

---

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

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

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

는 min-width시작 크기를 선언합니다. max-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;
    }
}

---

"중요!"를 사용하여 최대 너비를 정의하십시오. 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>

The CSS uses this to access the adjacent element (+) to .tooltip-wide, and from there navigates to .tooltip-inner, before applying the max-width attribute. This will only affect elements using the .tooltip-wide class, all other tooltips will remain unaltered.

---

You may edit the .tooltip-inner css class in bootstrap.css. The default max-width is 200px. You may change the max-width to your desired size.

---

after some experimenting, this worked best for me:

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

---

Set the class to the main tooltip div and for the inner tooltip

div.tooltip {
    width: 270px;
}

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

---

Please refer the below post. cmcculloh's answer worked for me. https://stackoverflow.com/posts/31683500/edit

As hinted at in the documentation, the easiest way to ensure that your tooltip does not wrap at all is to use

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

With this, you don't have to worry about dimension values or anything like that. Main problem being if you have a super long line of text it will just go off of the screen (as you can see in the JSBin Example).

---

Just override the default max-width to whatever fits your needs.

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

When max-width doesn't work (option 1)

If max-width does not work, you could use a set width instead. This is fine, but your tooltips will no longer resize to fit the text. If you don't like that, skip to option 2.

.tooltip-inner {
  width: 350px;
}

Correctly dealing with small containers (option 2)

Since Bootstrap appends the tooltip as a sibling of the target, it is constrained by the containing element. If the containing element is smaller than your max-width, then max-width won't work.

So, when max-width doesn't work, you just need to change the container:

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

Pro Tip: the container can be any selector, which is nice when you only want to override styles on a few tooltips.

---

BS3:

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

---

Try this code,

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

---

I had the same problem, however all popular answers - to change .tooltip-inner{width} for my task failed to do the job right. As for other (i.e. shorter) tooltips fixed width was too big. I was lazy to write separate html templates/classes for zilions of tooltips, so I just replaced all spaces between words with   in each text line.

---

Setting the max-width of class tooltip-inner didn´t work for me, I´m using bootstrap 3.2

Some how setting max-width only work if you set the width of parent class (.tooltip).

But then all tooltips become the size you specify. So here´s my solution:

add a Width to the parent class:

.tooltip {
  width:400px;
}

Then you add the max-width and change the display to inline-block, so it will not occupy the entire space

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

---

Mine where all variable lengths and a set max width would not work for me so setting my css to 100% worked like a charm.

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

---

I needed to adjust the width of some tooltips. But not an overall setting. So I ended up doing this:

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." />

---

On BS4, and if you don't want to change all tooltips width, you can use specific template for the tooltip you want :

<a href="/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>

---

in bootstrap 3.0.3 you can do it by modifying the popover class

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

참고URL : https://stackoverflow.com/questions/14596743/how-do-you-change-the-width-and-height-of-twitter-bootstraps-tooltips