layui单选框hover提示用title不生效是因为原生radio被隐藏，需在form.render()回调中为.layui-form-radio绑定layer.tips，并用data-tip预存提示文本，同时处理点击后tips残留及ios定位问题。
layui单选框 hover 提示为什么用 title 不生效
因为 layui 的 radio 是通过 JS 动态渲染成自定义样式（.layui-form-radio）的，原生 <input type="radio"> 被隐藏了，浏览器无法触发其 title 属性的原生提示。直接写 title="xxx" 在 input 上，hover 时完全没反应。
必须在 done 回调里给渲染后的 .layui-form-radio 绑定 layer.tips
layui 表单控件（包括 radio）是在 form.render() 或表格 done 后才生成真实 DOM，所以事件和 tips 必须等渲染完成再挂载。
- 不要在 HTML 模板里写
onmouseenter内联事件——动态渲染后失效 - 不要在
form.render()外直接写$('.layui-form-radio').on('mouseenter', ...)——DOM 还不存在 - 正确做法：在
form.render()的回调里，或表格/表单初始化的done中执行绑定
示例：
layui.use(['form', 'layer'], function(){
var form = layui.form,
layer = layui.layer;
form.render(); // 触发渲染
form.on('render', function(){
// 确保 DOM 已就绪
$('.layui-form-radio').each(function(){
var $radio = $(this);
var tipText = $radio.data('tip') || '请选择此项';
$radio.off('mouseenter').on('mouseenter', function(e){
// 传选择器字符串，不是 DOM 节点
if (window.tipsIndex) layer.close(window.tipsIndex);
window.tipsIndex = layer.tips(tipText, $radio, {
tips: [1, '#788085'],
tipsOffset: -10,
time: 0,
position: 'absolute' // 避免 iOS fixed 定位失效
});
}).on('mouseleave', function(){
if (window.tipsIndex) {
layer.close(window.tipsIndex);
window.tipsIndex = null;
}
});
});
});
});
data-tip 预埋提示内容比硬编码更可控
在原始 radio 标签上用 data-tip 存提示文案，比在 JS 里写死字符串更易维护、支持动态数据。
- HTML 写法：
<input type="radio" name="sex" value="1" title="男" data-tip="男性用户专属权益"> - 注意：这里的
title仅用于 layui 渲染显示文本，真正提示用的是data-tip - 如果 radio 是模板循环生成（如 table templet），确保
data-tip="{{d.tip}}"被正确插入
不推荐用 lay-text 或 lay-tips —— layui 原生 radio 不支持这些属性，纯属无效字段。
点击 radio 后气泡残留怎么办
用户先 hover 出 tips，再 click 选中，tips 常卡住不消失。根本原因是 layer.tips() 和表单选中动作无自动解耦。
- 必须在
form.on('radio(...)')回调开头就手动关掉当前 tips：if (window.tipsIndex) layer.close(window.tipsIndex); - 别等
success或异步操作后再关——时机太晚，用户已看到残留 - 避免用
mouseout关闭：手速快时，mouseout可能早于click触发，导致 tips 闪退
真正容易被忽略的是：iOS Safari 下，若未显式设 position: 'absolute'，tips 会固定在视口左上角不动；横向滚动表格时，它不会跟着 radio 走——这个细节漏了，整个提示在移动端就等于没做。
