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>

回答1:

Try this

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

回答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/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.4/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/bootstrap-vue@2.0.4/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>

来源：https://stackoverflow.com/questions/58819835/how-to-increase-the-width-of-the-tooltip-in-bootstrap-vue

标签

css

Vue.js

tooltip

width

bootstrap-vue