Bootstrap tooltip changes position on its own-CodePudding

im use bootstrap 4.3.1 version along with the vue.js version 2

my code

<div >
     <div >
          <div >
               <div
                   
                   @click="show = !show"
                   id="tooltip-button-1"
               ></div>
               <b-tooltip
                   :show.sync="show"
                   target="tooltip-button-1"
                   custom-
                   placement="bottom"
                   triggers="click"
               >
                   <div >
                        Тест
                   </div>
               </b-tooltip>
           </div>
       <div ></div>
    </div>
</div>

JS:

<script>
export default {
    name: "Test",
    data() {
        return {
            show: false,
        };
    },
};
</script>

and in this case, if I change the style of the tooltip, I increase its max-width on 1000px or more (.tooltip-inner), and if its width is greater than that of the parent (col-md-7), it changes the placement to the left

it turns out that the tooltip cannot go beyond the column

CodePudding user response：

Your code is working fine. I did not see any issue in that. Tooltip is behaving correct as per the col width (col-md-7) provided.

Live Demo :

new Vue({
  el: "#app",
  data: {
    show: false
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/>
<div id="app">
  <div >
    <div  style="text-align: center">
      <div  style="background-color: yellow">
        <div @click="show = !show" id="tooltip-button-1">
          Click Me
        </div>
        <b-tooltip target="tooltip-button-1" triggers="click" placement="bottom">Тест</b-tooltip>
      </div>
      <div ></div>
    </div>
  </div>
</div>

CodePudding user response：

new Vue({
  el: "#app",
  data: {
    show: false
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/>
<div id="app">
  <div  style="max-width: 1024px;">
    <div  style="text-align: center">
      <div style="background-color: yellow; width: 55%; overflow-y: scroll">
        <div @click="show = !show" id="tooltip-button-1">
          Click Me
        </div>
        <b-tooltip target="tooltip-button-1" triggers="click" placement="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b-tooltip>
      </div>
      <div style="background-color: red; width: 45%;">
           <div style="height: 40px"></div>
      </div>
    </div>
  </div>
</div>
 <style>
    .tooltip-inner {
        max-width: 300px!important
    }
    </style>

I found a more correct interpretation of my error

it appears if the block has scrolling