Question 277743 in CSS Question posted in
Some basic documentation can be found here.

Css – With Bootstrap 5.3 how to change the max width of a single tooltip

I would like to change the max width of a Bootstrap Tooltip without changing the others. I don’t use Sass or SCSS. I try many stuff based on the documentation:

tooltip-max-width="300px"
bs-tooltip-max-width="300px"
data-bs-tooltip-max-width="300px"
data-bs-max-width="300px"

The Tooltip is initialized in my JS code. I also try to add the custom parameter in the option, but it does not work.

this.buttonTooltip = new bootstrap.Tooltip(this.buttonImageEl, { html: true, maxWidth: "300px" });

Does any one know how to do this?

Tags:

2

Answers


  1. 0

    Use the data-bs-custom-class attribute

    Bootstrap dynamically creates Tooltips with a unique ID and appends them to the end of the document body. So the easy way to change specific Tooltips is to add a custom class using the data-bs-custom-class attribute. Bootstrap adds the class name to the tooltip (not the target) when it is created.

    Add the attribute to the target:

    <button type="button" 
  ...
  data-bs-custom-class="wide">
    OK
</button>

    Add css to change the width:

    .tooltip.wide .tooltip-inner {
  max-width: 500px;
}

    The snippet shows both a wide and default Tooltip.

    Snippet

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')

const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    .tooltip.wide .tooltip-inner {
  max-width: 500px;
}
    <button type="button" 
class="btn btn-secondary" 
data-bs-custom-class="wide"
data-bs-toggle="tooltip"  
data-bs-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.">
  Wide Tooltip
</button>


<button type="button" 
class="btn btn-secondary" 
data-bs-toggle="tooltip" 
data-bs-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.">
  Default Tooltip
</button>


<!-- Bootstrap 5.3 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    Login or Signup to reply.
  2. 0

    maxWidth is not a member of options. So the code won’t work. But still you can use customClass in the options. You can set the value from both attribute and options.

    const fooEl = document.getElementById('foo');
new bootstrap.Tooltip(fooEl);

const barEl = document.getElementById('bar');
new bootstrap.Tooltip(barEl);

const bazEl = document.getElementById('baz');
const bazOptions = {
  customClass: 'from-opt'
};
new bootstrap.Tooltip(bazEl, bazOptions);
    .from-attr {
  --bs-tooltip-max-width: 100px !important;
}

.from-opt {
  --bs-tooltip-max-width: 75px !important;
}
.
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<button id="foo" title="My loong toooltip">Default</button>
<button id="bar" title="My loong toooltip" data-bs-custom-class="from-attr">From Attribute</button>
<button id="baz" title="My loong toooltip">From Options</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    P.S: You should use the !important. Otherwise it’s getting overriden.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search