layui下拉框hover显示完整option文字无效是因浏览器限制原生select的option不支持title和:hover；应监听.layui-select-title的mouseenter/mouseleave，用layer.tips动态提示当前高亮dd的textcontent，并需处理触屏兼容、事件重复绑定及动态渲染时机。
layui下拉框 hover 显示完整 option 文字无效是浏览器限制
原生 <select></select> 的 <option></option> 元素在 Chrome、Firefox 等主流浏览器中**不响应 title 属性，也不支持 CSS :hover**。Layui 将 select 封装为 .layui-select-title + .layui-select-mid 结构后，这个限制依然存在——不是 layui 漏了功能，而是底层 DOM 规范不允许。
直接给 option 加 title="xxx" 或写 option:hover { ... } 都不会生效。别浪费时间调试样式或属性拼写。
用 layer.tips() 监听 .layui-select-title 实现悬停提示
真正可行的解法是绕过 option，改在触发区（即用户实际鼠标划过的那个“假输入框”）上监听 mouseenter，动态读取当前高亮项的文本并弹出 tips。
- 绑定事件对象必须是
.layui-select-title，不是select本身，也不是.layui-select-mid - 用
$(this).next('.layui-select-mid').find('dd.layui-this')或dd[lay-value="xxx"]定位当前高亮dd元素 - 从该
dd中取textContent（不是innerText，避免换行符干扰） - 调用
layer.tips(text, this, { tips: [2, '#fff'], time: 0 })，time: 0表示不自动关闭 - 必须配对监听
mouseleave并执行layer.closeAll('tips')，否则 tips 残留
避免重复绑定和内存泄漏
页面若多次调用 form.render('select')（比如 tab 切换、局部刷新），反复 $('.layui-select-title').on('mouseenter', ...) 会导致事件叠加、tips 叠加、关闭失效。
- 每次初始化前先解绑：
$('body').off('mouseenter', '.layui-select-title').off('mouseleave', '.layui-select-title') - 推荐用事件委托绑定到
document或body，选择器写成'body .layui-select-title' - 不要在
form.on('select(xxx)')回调里重新注册 hover 逻辑——它只响应选中变化，和悬停无关 - 如果 select 是动态插入的（如模态框内），确保 hover 初始化逻辑在渲染完成后执行，比如
form.render()后再绑定
触屏设备必须切换为 click 模式
mouseenter 在 iOS 和 Android 上不可靠：可能不触发、延迟触发、或与滚动冲突。单纯加 if ('ontouchstart' in window) 判断还不够，因为很多桌面浏览器也支持 touch 事件但仍有 hover 需求。
- 稳妥做法是检测是否为真触屏环境：
if ('ontouchstart' in window && window.matchMedia('(pointer: coarse)').matches) - 触屏下应禁用 hover 绑定，改为点击
.layui-select-title后用layer.open({ type: 1, content: '<div>...</div>' })渲染完整列表面板 - 面板内容需手动构建，把所有
dd的文本提取出来并支持滚动；不能复用原生下拉 DOM，因它被 layui 隐藏且结构不稳定 - 真正麻烦的不是实现两种模式，而是统一判断时机——建议把检测逻辑封装成函数，在 form.render() 后统一调用
最易被忽略的是：hover 提示的内容必须来自 dd 元素的实时 DOM 文本，而不是原始 option 的 innerHTML。Layui 可能对文本做过转义、截断或插值（比如含 {{d.name}}），直接读原始 HTML 会出错。务必用 dd.textContent 并做空值判断。
