blocks|key|388462|text|只需覆盖bootstrap.css|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388463|BS2中的默认值是max-width:200px；因此您可以根据需要增加它。|388464|.tooltip-inner+{
++++max-width:+350px;
++++/*+If+max-width+does+not+work,+try+using+width+instead+*/
++++width:+350px;+
}|code-block|syntax|javascript|388465|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Just override bootstrap.css</p>

<p>The default value in BS2 is max-width:200px; So you can increase it with whatever fits your needs.</p>

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


blocks|key|170391|text|在BS3上|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170392|.tooltip-inner+{
++++min-width:+150px;+/*+the+minimum+width+*/
}|code-block|syntax|javascript|170393|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>On BS3</p>

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


blocks|key|170428|text|用"important!“定义最大宽度并使用data-container="body“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170429|CSS文件|170430|.tooltip-inner+{
++++max-width:+500px+!important;
}|code-block|syntax|javascript|170431|HTML标签|170432|<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>|170433|JS脚本|170434|$('.tooltiplink').tooltip();|170435|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Define the max-width with "important!" and use data-container="body"</p>

<p>CSS file</p>

<pre><code>.tooltip-inner {
    max-width: 500px !important;
}
</code></pre>

<p>HTML tag</p>

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

<p>JS script</p>

<pre><code>$('.tooltiplink').tooltip();
</code></pre>


blocks|key|170352|text|您应该使用自己的css覆盖这些属性。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170353|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;
}|code-block|syntax|javascript|170354|选择器选择工具提示所在的div+(工具提示是由javascript添加的，通常不属于任何容器。|170355|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You should overwrite the properties using your own css. 
like so:</p>

<pre><code>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;
}
</code></pre>

<p>the selector choose the div that the tooltip is held (tooltip is added in by javascript and it usually does not belong to any container.</p>


blocks|key|388575|text|要解决宽度问题，请改用以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388576|$('input[rel="txtTooltip"]').tooltip({
++++container:+'body'
});|code-block|syntax|javascript|388577|示例：http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/|offset|length|388578|entityMap|0|LINK|mutability|MUTABLE|url|http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/^0|0|0|3|1R|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>To fix the width problem, use the following code instead.</p>

<pre><code>$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});
</code></pre>

<p>example:
<a href="http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/" rel="noreferrer">http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/</a></p>


blocks|key|388709|text|另一种解决方案；在CSS中创建一个新类(例如，工具提示范围)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388710|.tooltip-wide+%2B+.tooltip+>+.tooltip-inner+{
+++++max-width:+100%25;
}|code-block|syntax|javascript|388711|在需要宽工具提示的元素上使用此类：|388712|<div+class="tooltip-wide"+data-toggle="tooltip"+title="I+am+a+long+tooltip">Long+tooltip</div>|388713|Bootstrap工具提示在包含工具提示的元素下面生成标记，因此HTML在生成标记后实际上看起来像这样：|388714|<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>|388715|CSS使用它来访问到.tooltip-wide的相邻元素(%2B)，并在应用max-width属性之前从那里导航到.tooltip-inner。这将只影响使用.tooltip类的元素，所有其他工具提示将保持不变。|388716|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Another solution; create a new class (e.g. tooltip-wide) in CSS:</p>

<pre><code>.tooltip-wide + .tooltip &gt; .tooltip-inner {
     max-width: 100%;
}
</code></pre>

<p>Use this class on elements where you want wide tooltips:</p>

<pre><code>&lt;div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip"&gt;Long tooltip&lt;/div&gt;
</code></pre>

<p>Bootstrap tooltip generates markup below the element containing the tooltip, so the HTML actually looks something like this after the markup is generated:</p>

<pre><code>&lt;div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip"&gt;Long tooltip&lt;/div&gt;
&lt;div class="tooltip" role="tooltip"&gt;
    &lt;div class="tooltip-arrow"&gt;&lt;/div&gt;
    &lt;div class="tooltip-inner"&gt;I am a long tooltip&lt;/div&gt;
&lt;/div&gt;
</code></pre>

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


blocks|key|388672|text|经过一些试验，这对我来说效果最好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388673|.tooltip-inner+{
++++max-width:+350px;+/*+set+this+to+your+maximum+fitting+width+*/
++++width:+inherit;+/*+will+take+up+least+amount+of+space+*/+
}|code-block|syntax|javascript|388674|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>after some experimenting, this worked best for me:</p>

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


blocks|key|388386|text|您可以在bootstrap.css中编辑.tooltip-inner+css类。默认的最大宽度是200px。您可以将最大宽度更改为所需的大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388387|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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


blocks|key|170735|text|在Bootstrap+4上，如果您不想更改所有工具提示的宽度，则可以使用特定的模板来显示所需的工具提示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170736|<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>|code-block|syntax|javascript|170737|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>On Bootstrap 4, and if you don't want to change all tooltips width, you can use specific template for the tooltip you want :</p>

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


blocks|key|170442|text|将类设置为主工具提示div和内部工具提示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170443|div.tooltip+{
++++width:+270px;
}

div.tooltip-inner+{
++++max-width:+280px;
}|code-block|syntax|javascript|170444|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Set the class to the main tooltip div and for the inner tooltip</p>

<pre><code>div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
</code></pre>


blocks|key|170464|text|请参考下面的帖子。cmcculloh的回答对我很有效。https://stackoverflow.com/posts/31683500/edit|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|170465|正如in+the+documentation所暗示的，确保工具提示完全不换行的最简单方法是使用|170466|.tooltip-inner+{
++++max-width:+none;
++++white-space:+nowrap;
}|code-block|syntax|javascript|170467|有了它，你就不必担心维度值或类似的东西了。主要问题是，如果你有一行超长的文本，它就会从屏幕上消失(就像你在JSBin+Example中看到的那样)。|170468|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/posts/31683500/edit|1|http://getbootstrap.com/javascript/#callout-tooltip-multiline|2|http://jsbin.com/nihido/edit?css,output^0|R|19|0|0|2|K|1|0|0|1H|D|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|M|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]]]

<p>Please refer the below post. cmcculloh's answer worked for me.
<a href="https://stackoverflow.com/posts/31683500/edit">https://stackoverflow.com/posts/31683500/edit</a></p>

<p>As hinted at <a href="http://getbootstrap.com/javascript/#callout-tooltip-multiline" rel="nofollow noreferrer">in the documentation</a>, the easiest way to ensure that your tooltip does not wrap at all is to use</p>

<pre><code>.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}
</code></pre>

<p>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 <a href="http://jsbin.com/nihido/edit?css,output" rel="nofollow noreferrer">JSBin Example</a>).</p>


blocks|key|170410|text|BS3：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170411|.tooltip-inner+{+width:400px;+max-width:+400px;+}|code-block|syntax|javascript|170412|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>BS3:</p>

<pre><code>.tooltip-inner { width:400px; max-width: 400px; }
</code></pre>


blocks|key|388742|text|我需要调整一些工具提示的宽度。但不是一个整体的设置。所以我最终这样做了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388743|CSS|388744|.large-tooltip+.tooltip-inner+{
++++max-width:+300px;
}
@media+screen+and+(max-width:+300px)+{
++.large-tooltip+.tooltip-inner+{
++++max-width:+100%25;
++}
}|code-block|syntax|javascript|388745|JQuery|388746|$('[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');
++++++++}
++++});|388747|Html|388748|<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."+/>|388749|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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

<p>CSS</p>

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

<p>JQuery</p>

<pre><code>$('[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');
        }
    });
</code></pre>

<p>Html</p>

<pre><code>&lt;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." /&gt;
</code></pre>


blocks|key|388660|text|试试这段代码，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388661|.tooltip-inner+{
+++++max-width:350px+!important;
}|code-block|syntax|javascript|388662|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this code,</p>

<pre><code>.tooltip-inner {
     max-width:350px !important;
}
</code></pre>


blocks|key|170540|text|我的所有可变长度和设置的最大宽度对我来说都不起作用，所以将我的css设置为100%25就像一个护身符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170541|.tooltip-inner+{
++++max-width:+100%25;
}|code-block|syntax|javascript|170542|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>.tooltip-inner {
    max-width: 100%;
}
</code></pre>


blocks|key|170771|text|对于Bootstrap+4，我使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170772|.tooltip-inner+{
++++margin-left:+50%25;
++++max-width:+50%25;
++++width:+50%25;
++++min-width:+300px;
}|code-block|syntax|javascript|170773|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>With Bootstrap 4 I use</p>
<pre><code>.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}
</code></pre>


blocks|key|388489|text|在bootstrap+3.0.3中，您可以通过修改popover类来完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|388490|.popover+{
++++min-width:+200px;
++++max-width:+400px;
}|code-block|syntax|javascript|388491|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>in bootstrap 3.0.3 you can do it by modifying the popover class</p>

<pre><code>.popover {
    min-width: 200px;
    max-width: 400px;
}
</code></pre>


<p>I created a tooltip using Twitter Bootstrap.</p>

<p>The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line.</p>

<p>How do I change the width of the tooltip? Is this specific to Twitter Bootstrap or to tooltips themselves?</p>


How do you change the width and height of Twitter Bootstrap's tooltips?

容器

我使用Twitter Bootstrap创建了一个工具提示。工具提示显示为三行。但是，我想只显示一行的工具提示。如何更改工具提示的宽度？这是针对Twitter Bootstrap还是针对工具提示本身？

问如何更改Twitter Bootstrap工具提示的宽度和高度？
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改Twitter Bootstrap工具提示的宽度和高度？EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改Twitter Bootstrap工具提示的宽度和高度？
EN