使用 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 - 如果单击其中一个工具提示,如何弹出具有相同内容的工具提示

带有自定义滚动条的 QML Listview

按钮:带有滚动条的下载按钮仅下载几行

为啥带有文本溢出和滚动条的 flex 子项不会在 Firefox 中展开?

带有滚动条的 QGraphicsView 内不需要的边距