How to Increase The Width of The Tooltip in Bootstrap-Vue

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

Try this

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

Adjust Bootstrap Tooltip Width

I hope I'm not too late to post this for future programmers looking for answers. There's a question like this one. Go to this link: How do you change the width and height of Twitter Bootstrap's tooltips?

One of the answers there is very useful. It was answered by @knobli. I don't know how to link the answer but I hope you can go to that page and vote it up. Anyway, I'll just copy it right here.

For CSS:

.tooltip-inner {
    max-width: 100% !important;
}

For HTML:

<a href="#" data-toggle="tooltip" data-placement="right" data-container="body" title="" data-original-title="Insert Title">Insert Title</a>

Just add data-container="body" and you're ready to go.

How can a Bootstrap-vue tooltip text be changed conditionally?

You just have to bind a value to the tooltip text that can be changed, like computed:

new Vue({  el: "#app",  data: {    username: 'Username1',    checkbox1: false,    tooltipTextContent: 'block'  },  computed: {    tooltipText() {      if (!this.checkbox1) {        return this.tooltipTextContent      } else {        return `${this.tooltipTextContent} changed`      }    }  }})

.active {  color: red;}

<!-- Load required Bootstrap and BootstrapVue CSS --><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers --><script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue --><script src="//unpkg.com/vue@latest/dist/vue.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support --><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">  <div class="text-center">    <b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary">      <div v-bind:class="{ active: checkbox1 }">        {{ username }}      </div>    </b-button>  </div>  <b-form-checkbox id="checkbox-1" v-model="checkbox1" name="checkbox-1">    Change tooltip text?  </b-form-checkbox></div>

Changing the width of Bootstrap popover

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Basically i put the popover code in the row div, instead of the input div. Solved the problem.

How to disable b-tooltip auto position placement Bootstrap-Vue

Try the below code. Sandbox Example

Approach 1: Need to add boundary="document"

<template>
  <div id="app">
    <div class="wrap">
      <div class="box">
        <div
          class="item"
          id="tooltip-target-1"
          :style="{ width: sizeWidth + 'px' }"
        >
          Click me
          <b-tooltip target="tooltip-target-1" triggers="click" placement="top"
          boundary="document">
            <span class="bold">I want it</span><br />
            <span>break the line</span><br />
            <span class="yellow">and custom style</span>
          </b-tooltip>
        </div>
        <button @click="zooOut">Zoom</button>
      </div>
    </div>
  </div>
</template>

---

Approach 2:

<template>
  <div id="app">
    <div class="wrap">
      <div class="box">
        <div
          class="item"
          v-b-tooltip.click.top.html="toolTipData"
          id="tooltip-target-1"
        >
          Click me
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      toolTipData: {
        title: `<span class="bold">I want it</span><br /><span>break the line</span><br /><span class="yellow">and custom style</span>`,
      },
    };
  },
};
</script>

How can add bootstrap tooltip inside Vue.js

You need to run $('[data-toggle="tooltip"]').tooltip() AFTER the data loads from the server. To ensure the DOM is updated, you can use the nextTick function:

fetchTaskList: function(){
    this.$http.get('/backend/religion/data', function(tasks){
        this.$set('list', tasks);
        Vue.nextTick(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    });
}

https://vuejs.org/api/#Vue-nextTick

Edit: a more complete and robust solution has been posted by Vitim.us below

---

Related Topics