CODEWITHSUNDEEP
cssvue.jstooltipwidthbootstrap-vue
SM079
SM079

Reputation: 715

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>

Upvotes: 10

Views: 15093

Answers (5)

Keshab
Keshab

Reputation: 256

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;
}

Upvotes: 1

tinystone
tinystone

Reputation: 635

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.

Upvotes: 3

Ali
Ali

Reputation: 949

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.

Upvotes: 2

Hiws
Hiws

Reputation: 10334

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>

Upvotes: 1

Awais
Awais

Reputation: 4902

Try this

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

Upvotes: 9

Related Questions