仅更改一个引导程序 3 工具提示的大小

Question

我正在使用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>

我也尝试过没有CSS +.tooltip，但它仍然不适用。

我也尝试了以下方法，但仍然不起作用

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

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

Answer 1

如果是关于在 #extTotalThisWk 中仅选择该工具提示，则可以将id用作选择器。

#extTotalThisWk + .tooltip > .tooltip-inner

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

#extTotalThisWk + .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>

<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>
  <p id="extTotalThisWkBis" 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>">
  another one , another id</p>

它是关于

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将应用的方法。特异性基于由不同类型的CSS选择器组成的匹配规则。

Answer 2

您可以将

代码包装在div中，也可以使用父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>