Bootstrap-Vue中如何增加tooltip的宽度

Posted 2023-02-16

【中文标题】Bootstrap-Vue中如何增加tooltip的宽度

【英文标题】：How to increase the width of the tooltip in Bootstrap-Vue

【发布时间】：2020-03-08 05:32:46

【问题描述】：

有没有办法增加 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>

【问题讨论】：

你试过.tooltipwidth:100px !important;

@Awais 这会更改显示工具提示的位置。不是工具提示的大小

【参考方案1】：

试试这个

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

【讨论】：

注意，对于移动小屏幕，您可能需要将width 设置为低于320px

这没有任何区别

【参考方案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>