8

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>
SM079
  • 412
  • 2
  • 7
  • 20

4 Answers4

8

Try this

.tooltip .tooltip-inner{
  max-width: 500px !important;
  width: 400px !important;
}
Awais
  • 4,752
  • 4
  • 17
  • 40
2

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.

Ali
  • 899
  • 2
  • 13
  • 33
1

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>
Hiws
  • 8,230
  • 1
  • 19
  • 36
1

BootstrapVue provides 2 ways of using tooltip component: <b-tooltip> component & v-b-tooltip directive.

If v-b-tooltip directive is used, here is how to customise it by adding a css class:

<template>
  <i v-b-tooltip="{ customClass: 'custom-class-name'}" title="I am in tooltip">I am info</i>
</template>

<style scoped>
.custom-class-name::v-deep .tooltip-inner {
  max-width: 20em;
}
</style>

note 1: v-b-tooltip directive doc and v-b-tooltip directive "customClass" doc.

note 2: since v-b-tooltip is not part of the current component, but rather its child component: v-deep is used to bring css customisation in <style scoped>. vue deep syntax ref

note 3: v-deep is applied to the parent element. In this case, .custom-class-name element has to be the parent of .tooltip-inner element.

tinystone
  • 369
  • 3
  • 6