时间戳

首页 > 解决方案 > 仅更改一个 Bootstrap 3 工具提示的大小

html - 仅更改一个 Bootstrap 3 工具提示的大小

问题描述

我正在使用Bootstrap 3 tooltip，但在一页上我想增加它们的大小。

我不想影响网站的其他部分。

我已经尝试了以下代码，但它不起作用，所以我想知道我的语法是否错误或什么。

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
.dashboard+.tooltip>.tooltip-inner {
  max-width: 350px;
  width: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


     <div class="row">
        <div class="col-xs-12 col-md-7">
           <p>This week:</p>
        </div>
        <div class="col-xs-12 col-md-4">
           <p id="extTotalThisWk" class="dashboard" data-html="true" data-toggle="tooltip" data-placement="bottom" style="cursor: pointer" data-original-title="
                 <span class='text-left'>
                    <p style='padding-top: 5px'>This total number is made up from:</p>
                    <ul style='padding-bottom: 5px'>
                       <li>Added this week - Deleted this week</li>
                    </ul>
                 </span>">123</p>
        </div>
        <div class="hidden-xs col-md-1"></div>
     </div>

我也试过没有+.tooltipin theCSS但它仍然不适用。

我也尝试了以下但仍然没有工作

 <span class='text-left' style='max-width: 350px; width: 350px;'>

显然，如果我只是使用.tooltip-inner它，但这会影响我不想做的整个网站。

标签： htmlcsstwitter-bootstrap-3tooltiptwitter-bootstrap-tooltip

解决方案

您可以将代码包装在 adiv中，并且可以使用>parent 中的选择器。class确保span元素是inline，因此将它们设置为block并为其赋予样式。下面是工作片段

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
.main-holder>.tooltip>.tooltip-inner {
  max-width: 500px;
  text-align: center
}

span.text-left {
  display: block;
  width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="main-holder">
  <p id="extTotalThisWk" class="dashboard" data-html="true" data-toggle="tooltip" data-placement="bottom" style="cursor: pointer" data-original-title="
         <span class='text-left'>
            <p>This total is:</p>
            <div>Added this week - Deleted this week</div>
         </span>">
    123</p>
</div>

推荐阅读