[Vuejs]-How to increase b-tooltip width?

by

3👍

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/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.14.0/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/bootstrap-vue@2.14.0/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>
👤Hiws

0👍

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.

👤Jack

Leave a comment