swing中控制Tooltip显示和隐藏的方法

本文介绍了一个使用Java Swing实现自定义工具提示显示和隐藏逻辑的例子。通过按钮触发,可以手动控制特定按钮工具提示的显示与隐藏,同时设置了较长的默认消失延迟。

 
import java.awt.EventQueue;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.Action;
import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class a {
        public static void main(String[] args) {
                ToolTipManager.sharedInstance().setDismissDelay(20000);
                final JPanel panel = new JPanel();
                final JButton btn1 = new JButton("显示");
                panel.add(btn1);
                final JButton btn2 = new JButton("隐藏");
                panel.add(btn2);
                final JButton btn3 = new JButton("提示按钮");
                btn3.setToolTipText("button_tooltip");
                panel.add(btn3);
                btn1.addActionListener(new ActionListener() {
                        public void actionPerformed(ActionEvent e) {
                                postToolTip(btn3);
                        }
                });

                btn2.addActionListener(new ActionListener() {
                        public void actionPerformed(ActionEvent e) {
                                hideToolTip(btn3);
                        }
                });
                JFrame frame = new JFrame();
                frame.setContentPane(panel);
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setSize(500, 400);
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
        }

        public static void postToolTip(JComponent comp) {
                Action action = comp.getActionMap().get("postTip");
                ActionEvent ae = new ActionEvent(comp, ActionEvent.ACTION_PERFORMED,
                                "postTip", EventQueue.getMostRecentEventTime(), 0);
                action.actionPerformed(ae);
        }

        public static void hideToolTip(JComponent comp) {
                Action action = comp.getActionMap().get("hideTip");
                if (action == null) // no tooltip
                        return;
                ActionEvent ae = new ActionEvent(comp, ActionEvent.ACTION_PERFORMED,
                                "hideTip", EventQueue.getMostRecentEventTime(), 0);
                action.actionPerformed(ae);
        }

}

 

 

`el-tooltip` 是 Element UI 中常用的提示组件,用于在鼠标悬停或点击时显示简短文本。要**精确控制显示隐藏**,你可以通过属性、事件手动绑定的方式来实现。 --- ### ✅ 一、基本用法(自动触发) 默认情况下,`el-tooltip` 根据 `trigger` 属性自动控制显隐: ```vue <template> <el-tooltip content="这是提示内容" placement="top" trigger="hover"> <span>悬停显示</span> </el-tooltip> </template> ``` - `trigger="hover"`:鼠标进入显示,离开隐藏(默认) - `trigger="click"`:点击显示,再次点击或其他地方点击隐藏 --- ### ✅ 二、手动控制显示/隐藏(关键方法) 如果你想**完全手动控制 Tooltip显示隐藏**,可以使用 `v-model` 或 `visible-arrow` + `value` 绑定一个布尔值。 #### ✅ 方法 1:使用 `v-model` 控制显隐 ```vue <template> <div> <!-- 触发按钮 --> <button @click="show = !show">切换提示</button> <!-- 手动控制Tooltip --> <el-tooltip :disabled="!show" content="我被手动控制了!" placement="top"> <span>这里是触发元素</span> </el-tooltip> </div> </template> <script> export default { data() { return { show: false // 控制是否显示 } } } </script> ``` > 🔔 技巧:使用 `:disabled="!show"` 来“反向控制”是否启用 tooltip。当 `show === true` 时 tooltip 生效并立即显示(如果是 hover 还是需要移入),但更推荐下面这种直接绑定方式。 --- #### ✅ 方法 2:使用 `v-model` 直接绑定显隐状态(推荐) ```vue <template> <div> <button @click="showTip = true">显示 Tooltip</button> <button @click="showTip = false">隐藏 Tooltip</button> <el-tooltip v-model="showTip" content="这是一条持久提示" placement="top"> <span slot="content">支持多行内容哦~</span> <span>触发区域</span> </el-tooltip> </div> </template> <script> export default { data() { return { showTip: false } } } </script> ``` ✅ 这是最标准的手动控制方式:`v-model` 绑定一个布尔变量,设置为 `true` 就显示,`false` 就隐藏。 --- ### ✅ 三、结合事件控制(如 click、focus 等) #### 示例:点击按钮显示,3秒后自动关闭 ```vue <template> <div> <el-tooltip v-model="show" content="3秒后将自动关闭" placement="top"> <button @click="openWithDelay">点击显示</button> </el-tooltip> </div> </template> <script> export default { data() { return { show: false } }, methods: { openWithDelay() { this.show = true setTimeout(() => { this.show = false }, 3000) } } } </script> ``` --- ### ✅ 四、监听显示/隐藏事件(`show` `hide`) `el-tooltip` 提供了两个事件钩子,可用于调试或副作用处理: ```vue <el-tooltip v-model="show" content="监听打开关闭事件" @show="onShow" @hide="onHide" > <button>带事件监听的 Tooltip</button> </el-tooltip> ``` ```js methods: { onShow() { console.log('Tooltip显示') }, onHide() { console.log('Tooltip隐藏') } } ``` --- ### ✅ 五、高级技巧:点击外部关闭(类似 Popover 行为) 虽然 `el-tooltip` 不原生支持“点击外部关闭”,但我们可以通过 `$refs` 全局事件模拟: ```vue <template> <div ref="container"> <el-tooltip v-model="show" content="点击外面可关闭" placement="top"> <button @click.stop="toggle">点我显示</button> </el-tooltip> </div> </template> <script> export default { data() { return { show: false } }, watch: { show(newVal) { if (newVal) { // 显示时绑定 document 点击事件 this.$nextTick(() => { document.addEventListener('click', this.handleOutsideClick) }) } else { document.removeEventListener('click', this.handleOutsideClick) } } }, beforeDestroy() { document.removeEventListener('click', this.handleOutsideClick) }, methods: { toggle() { this.show = !this.show }, handleOutsideClick(e) { if (!this.$refs.container.contains(e.target)) { this.show = false } } } } </script> ``` --- ### ✅ 六、常见属性汇总 | 属性 | 说明 | |------|------| | `v-model` | 双向绑定显示状态(true 显示,false 隐藏) | | `:disabled` | 禁用 tooltip,相当于不生效 | | `trigger="hover/click/focus"` | 触发方式 | | `open-delay="500"` | 延迟 500ms 显示(hover 有效) | | `hide-after="2000"` | click 模式下 2s 后自动隐藏 | | `manual` | 已废弃,请使用 `v-model` 替代 | --- ### ✅ 总结:如何灵活控制 el-tooltip 显隐? | 需求 | 实现方式 | |------|-----------| | 自动 hover 显示 | `trigger="hover"`(默认) | | 点击显示/隐藏 | `trigger="click"` | | 完全手动控制 | `v-model="show"` | | 定时自动关闭 | `setTimeout(() => show = false, 3000)` | | 点击外部关闭 | 结合 `document.addEventListener` | | 调试常驻显示 | `v-model="true"` | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值