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

Question

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>

@Awais this changes the place where the tooltip is being shown. not the size of the tooltip — SM079
– SM079, Commented Nov 12, 2019 at 13:44

Awais · Accepted Answer · 2019-11-12 13:50:13Z

9

Try this

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

answered Nov 12, 2019 at 13:50

Awais

4,9424 gold badges20 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Troy Morehouse Over a year ago

Note, you may want to set width to below 320px for small mobile screens

Mayank Kumar Chaudhari Over a year ago

This does not make any difference

tinystone · Accepted Answer · 2023-07-25 03:18:35Z

3

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.

edited Jul 25, 2023 at 3:18

answered May 4, 2023 at 12:26

tinystone

6568 silver badges9 bronze badges

1 Comment

tinystone Over a year ago

more examples here

Ali · Accepted Answer · 2022-04-19 07:28:21Z

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:

Tag the b-tooltip element with a custom class, like custom-class="long-tooltip"
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.

answered Apr 19, 2022 at 7:28

Ali

9592 gold badges14 silver badges37 bronze badges

Comments

Hiws · Accepted Answer · 2020-05-27 14:01:18Z

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>

Keshab · Accepted Answer · 2023-10-20 08:47:35Z

1

I needed to have wider tooltips only when texts were long and following CSS change did the job for me without increasing the width for existing small texts:

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

answered Oct 20, 2023 at 8:47

Keshab

2562 gold badges3 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related