'How to increase b-tooltip width?

I am using b-tooltip tags of BootstrapVue to show information. I want to increase the width of b-tooltip (for long text message), text alignment, etc . How can i do it (basically how can i style it)?

<b-button id="tooltip-target-1">
    Hover Me
  </b-button>
  <b-tooltip target="tooltip-target-1" triggers="hover">
    I am tooltip <b>component</b> content!
  </b-tooltip>
cssvue.jsbootstrap-4tooltipbootstrap-vue


Solution 1:[1]

If you're using SCSS in your project, then the easiest way for a global solution would be to modify the SCSS variables to your liking.

If you want to only apply styles to a specific tooltip, or apply something there isn't a variable for. You can use the custom-class prop on b-tooltip to supply it with a custom class, which allows you to style it to your liking.

If you're placing this CSS in a scoped style tag <style scoped> you will need to use a deep selector to target the subcomponents such as .tooltip-inner.

new Vue({
  el: '#app',
})
.custom-tooltip > .tooltip-inner{
  /* Removes the default max-width */
  max-width: none;
  
  /* Apply whatever other styles you want */
  font-size: 150%;
  padding: 10px;
}

/* This styling is just for the example */
#app {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
<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.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>


<div id="app">
  <div>
    <b-button id="tooltip-target-1">
      Hover Me
    </b-button>
    <!-- Use the variant prop to use your theme colors -->
    <!-- If you want a custom color, you can use CSS -->
    <b-tooltip target="tooltip-target-1" variant="primary" custom-class="custom-tooltip" triggers="click">
      I am tooltip <b>component</b> content!
    </b-tooltip>
  </div>
</div>

Solution 2:[2]

The trick to change styles of bootstrapvue tooltip.

<style>
.tooltip-inner {
    max-width: 800px;
}
</style>

Don't use scoped in style because the component render the html of tooltip outside of app so if you put scoped your css will not work.

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
Solution 2 Jack

Related Questions