Change size of one Bootstrap 3 tooltip only - html

Question

I am using Bootstrap 3 tooltip but on one page i want to increase the size of them.
I don't want to affect the rest of the site.
I have tried the following code but it doesn't work so i was wondering if i have the syntax wrong or something.
$(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>
I have also tried it without the +.tooltip in the CSS but it still doesn't apply it.
Also i have tried the following but still didn't work
<span class='text-left' style='max-width: 350px; width: 350px;'>
Obviously if i just use .tooltip-inner it works but this affects the whole site which i don't want to do.

Answer 1

If it is about selecting only that tooltip inside #extTotalThisWk, then you can use the id as a selector .
#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>
It is about
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Answer 2

You can wrap your code inside a div and can use > selector from parent class.Make sure that span elements are inline, so set them to block and give the style to it. Below is the working snippet
$(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>