bootstrap-4 - 带有引导工具提示的制表符
问题描述
我必须在 Tabulator 中集成引导工具提示。但是我显示了两个工具提示。
window.addEventListener("load", () => {
const data = [
{id: 1, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
{id: 2, column1:"abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
{id: 3, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"}
];
window.table = new Tabulator("#tablediv", {
data: data,
persistence: false,
movableColumns: true,
responsiveLayout: 'hide',
columns: [
{title: "id", field: "id"},
{title: "column1", field: "column1", headerTooltip: "tooltip1"},
{title: "column2", field: "column2", headerTooltip: "tooltip2"},
{title: "column3", field: "column3", headerTooltip: "tooltip3"},
{title: "column4", field: "column4", headerTooltip: "tooltip4"}
]
});
$('[title]').tooltip();
});
示例:https ://jsfiddle.net/chemarf/673eny9o/
我看到“mouseenter”事件触发了函数“setTooltip”。有办法改变这种情况吗?
谢谢你的帮助。
解决方案
问题是每次您将鼠标悬停在标题被重置时,您需要通过返回 false 来告诉制表器不要再次设置标题,tooltipsHeader
您还必须headerTooltip
从列定义中删除。
尝试这个:
window.addEventListener("load", () => {
const data = [
{id: 1, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
{id: 2, column1:"abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
{id: 3, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"}
];
window.table = new Tabulator("#tablediv", {
data: data,
persistence: false,
movableColumns: true,
responsiveLayout: 'hide',
columns: [
{title: "id", field: "id"},
{title: "column1", field: "column1"},
{title: "column2", field: "column2"},
{title: "column3", field: "column3"},
{title: "column4", field: "column4"}
],
tooltipsHeader: ( column ) =>
{
const customToolTips = {
column1 : 'ToolTip1',
column2 : 'ToolTip2',
column3 : 'ToolTip3',
/* column4 : 'ToolTip4', */
};
try
{
if ( ! ( column.getDefinition().field in customToolTips ) )
{
// No tooltip is defined
return false;
}
const header = column.getElement();
if ( typeof header.dataset.originalTitle !== 'undefined' )
{
// BS tooltip already set
return false;
}
return customToolTips[ column.getDefinition().field ];
}
catch ( exception )
{
console.error(exception);
return false;
}
},
tableBuilt: () =>
{
try
{
$('#tablediv .tabulator-col[title]').tooltip();
}
catch ( exception )
{
console.error(exception);
return false;
}
}
});
});
推荐阅读
- python - 我如何 file.find("a","b","c"..... 等 "z") 和 ord("A","B","C"..... 等“Z”)在python中
- entity-framework - EFCore 在自引用对象中重复
- cloud - 谷歌云平台抢占式实例能否自动重启?
- django - django 中的 send_mail() 没有发送。命令行 sendmail 是
- animation - Godot 动画在多人游戏中无法正常工作
- java - 发送 Volley Multipart 帖子图像和参数请求时出现错误 500
- javascript - 将一个很长的字符串作为参数发送到 asmx Web 服务
- flutter - Flutter:每次访问页面时如何在底部导航栏上重新加载页面
- spring-security - 使用 Spring Security 在同一应用程序中基于 SAML2 和基于表单的登录
- node.js - 无法使用 npm start 命令启动反应应用程序