使用 tooltipster 的带有滚动条的工具提示
Posted
技术标签:
【中文标题】使用 tooltipster 的带有滚动条的工具提示【英文标题】:tooltip with scrollbar using tooltipster 【发布时间】:2016-06-26 10:33:27 【问题描述】:我必须使用 tooltipster jquery
在工具提示中使用绑定 html。但我必须在工具提示中绑定更多数据。
如何使用tooltipster jquery在tooltip里面实现滚动条?我必须使用 tooltipster jquery 和 tooltipster css。
我使用了以下代码:
$('#MainContent').tooltipster(
trigger:"click",
contentAsHTML: true,
content: thtmlcnt,
position:"right",
autoClose:"true",
positionTracker:true
);
请给出一些解决方案如何在工具提示中实现滚动条。
【问题讨论】:
【参考方案1】:例如,您可以通过为内容指定最大高度来实现此目的
jQuery
$('#MainContent').tooltipster(
trigger:"click",
contentCloning: false,
content: $('.content').detach(),
position:"right",
autoClose:"true",
positionTracker:true
);
HTML
<div class="content" style="max-height:100px">
//Your content here
</div>
【讨论】:
【参考方案2】:也许这会有所帮助:
.tooltipster-base
max-height: 300px;
pointer-events: all !important;
.tooltipster-box
display: inline-block !important;
width: 100%;
height: 100%;
overflow: auto;
参考:https://github.com/louisameline/tooltipster-scrollableTip/blob/master/tooltipster-scrollableTip.js
【讨论】:
以上是关于使用 tooltipster 的带有滚动条的工具提示的主要内容,如果未能解决你的问题,请参考以下文章
使用带有滚动条的任何控件时不会触发 MouseWheel 事件(在 C# Windows 窗体中)
Tooltipster - 如果单击其中一个工具提示,如何弹出具有相同内容的工具提示