easyui combobox 设置tooltip 无效
时间: 2024-11-25 17:12:25 浏览: 9
easyUI1.3.6及中文参考手册 api
EasyUI的ComboBox组件默认并不直接支持设置全局的Tooltip提示,因为Tooltip通常是单独的控件,而不是直接集成到特定组件中的。然而,你可以通过自定义CSS或者JavaScript来实现这个功能。
如果你想在选中项上添加Tooltip提示,可以尝试这样做:
1. 首先,在CSS中为 ComboBox 的选中项添加一个类名,例如 `.easyui-combobox-item-selected`:
```css
.easyui-combobox-item-selected {
position: relative;
}
.easyui-combobox-item-selected::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
```
2. 然后,当你需要显示Tooltip时,可以在选择项的数据属性 `data-tooltip` 中存储你要展示的信息,并在用户交互时动态改变该元素的 `opacity` 属性使其显示:
```javascript
$(function() {
$('#yourComboBox').combobox({
onSelect: function(value) {
var tooltip = $(this).find('.easyui-combobox-item-selected').attr('data-tooltip');
if (tooltip) {
$('.easyui-combobox-item-selected::after').text(tooltip).stop().fadeIn();
} else {
$('.easyui-combobox-item-selected::after').fadeOut();
}
},
onChange: function(value) {
// 清除上一次选择的Tooltip
$('.easyui-combobox-item-selected::after').fadeOut();
}
});
});
```
这样,当用户选择不同的选项时,对应的Tooltip就会显示出来。
阅读全文