如何在Bootstrap-Vue中增加工具提示的宽度

Question

有没有办法增加工具提示的宽度 bootstrap vue.我有一个重要的声明要显示在工具提示中。并且工具提示将消息显示为连续三个单词。所以工具提示的高度更大，宽度更小。

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

Answer 1

试试这个

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

Answer 2

您可以通过定位 .tooltip-inner 并更改最大宽度来更改工具提示的长度。如果将其设置为 none，工具提示在超出视口时仍会换行。

如果您使用的是范围样式标签 (<style scoped>)，您可能需要使用 deep selector 才能正确定位 .tooltip-inner。

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

Answer 3

如果样式部分是有范围的：例如<style scoped> 那么你必须像 >>> or v-deep or /deep/ 一样使用 Deep Selectors，具体取决于所使用的 Vue 版本。对于上面的例子：

使用自定义 class 标记 b-tooltip 元素，例如 custom-class="long-tooltip"
<style scoped> 下有如下部分：

.long-tooltip::v-deep .tooltip-inner {
  max-width: 30rem;
}

这是动态生成元素时的解决方案。也适用于 v-html.

创建的任何内容

如何在Bootstrap-Vue中增加工具提示的宽度

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

css

tooltip

width

vue.js

bootstrap-vue