如何在Bootstrap-Vue中增加工具提示的宽度
如何在Bootstrap-Vue中增加工具提示的宽度
提问于 2019-11-12 21:31:29
有没有办法增加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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-12 21:50:13
尝尝这个
.tooltip .tooltip-inner{
max-width: 500px !important;
width: 400px !important;
}Stack Overflow用户
发布于 2019-11-12 22:01:50
你可以通过以.tooltip-inner为目标并改变最大宽度来改变你的工具提示的长度。如果将其设置为无，则工具提示在离开视口时仍将换行。
如果使用作用域样式标记(<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58819835
复制相关文章
相似问题
腾讯云开发者
