'How to increase the width of the tooltip in Bootstrap-Vue

Is there a way to increase the width of tooltip in bootstrap vue. I have live a big statement to be shown in the tooltip. and the tooltip is displaying the message as three words in a row. so the height of the tooltip is more and the width is less.

<div>
  <span id="disabled-wrapper" class="d-inline-block" tabindex="0">
    <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button>
  </span>
  <b-tooltip target="disabled-wrapper">jasfkjsdfsdafiads uhsdifumasb jhgasd  asd ua d uiuud  iad iadh ad ihhad ad aid ia dia id ai did ai d a ushdufsd ushd iufads fiuash dfias d uusahdfiusahifu ais fisadu fius fsuhdfushfisafh isaf hisauhfisa hhfish fiushf iush fisu hfisuh fis hfius hfius stooltip</b-tooltip>
</div>
cssvue.jstooltipwidthbootstrap-vue


Solution 1:[1]

Try this

.tooltip .tooltip-inner{
  max-width: 500px !important;
  width: 400px !important;
}

Solution 2:[2]

You can change how long your can be tooltip is by targeting .tooltip-inner and changing the max-width. If you set it to none, the tooltip will still wrap if it goes out of the viewport.

If you're using a scoped style tag (<style scoped>) you might need to use a deep selector to target .tooltip-inner correctly.

new Vue({
  el: '#app'
})
.longTooltip .tooltip-inner {
 max-width: 300px;
}

.veryLongTooltip .tooltip-inner {
/* This will make the max-width relative to the tooltip's container, by default this is body */
 max-width: 100%; 
 
 /* This will remove any limits, but should still wrap if overflowing the viewport */
 /* max-width: none; */ 
}
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-btn id="myButton3">Hover/click for a normal tooltip</b-btn>
 <b-tooltip target="myButton3" triggers="hover click">
  This is a really really long message
 </b-tooltip>
 
 <b-btn id="myButton">Hover/click for a long tooltip</b-btn>
 <b-tooltip target="myButton" custom-class="longTooltip" triggers="hover click">
  This is a really really long message
 </b-tooltip>
 
<b-btn id="myButton2">Hover/click for a very long tooltip</b-btn>
 <b-tooltip target="myButton2" custom-class="veryLongTooltip" triggers="hover click">
  This is a really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long message
 </b-tooltip>
</div>

Solution 3:[3]

If the style section is scoped: e.g. <style scoped> then you have to use Deep Selectors like >>> or v-deep or /deep/ depending on which version of Vue it being used. For the above example:

  1. Tag the b-tooltip element with a custom class, like custom-class="long-tooltip"
  2. Under the <style scoped> have a section like below:
.long-tooltip::v-deep .tooltip-inner {
  max-width: 30rem;
}

This is a solution for when elements are dynamically generated. Also applies for anything created by v-html.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Awais
Solution 2
Solution 3 Ali

Related Questions