layer.tips 不适合做右下角悬浮按钮组，因其本质是临时提示浮层，不支持常驻、多按钮及 hover 子菜单，且自动销毁易引发 DOM 泄漏等问题；应改用原生 fixed 定位容器结合 layui.dropdown 实现兼容方案。
layer.tips 不适合做右下角悬浮按钮组
很多人第一反应是用 layer.tips，但它本质是「临时提示浮层」，不支持常驻、不支持多按钮、不支持 hover 展开子菜单，且默认会自动销毁（time 超时或鼠标移出即消失）。强行 hack 会导致 dom 泄漏、事件绑定混乱、z-index 冲突等问题。
用原生 HTML + CSS 定位 + layui.dropdown 实现常驻右下角按钮组
核心思路：不依赖 layer 模块的浮层逻辑，而是用固定定位容器承载按钮，再用 layui.dropdown 管理悬停展开的子菜单。这样既轻量，又和 Layui 生态兼容。
- 外层容器用
position: fixed; bottom: 20px; right: 20px;锚定右下角 - 主按钮用普通
<button class="layui-btn layui-btn-primary"><i class="layui-icon"></i></button> - 子菜单通过
layui.dropdown.render()绑定到该按钮，设置trigger: 'hover'和align: 'right'避免被视口截断 - 务必加
skin: 'layui-bg-blue'或自定义 class 控制下拉菜单背景，否则默认灰白在深色背景下不可读
<div id="help-fab" style="position:fixed;bottom:20px;right:20px;z-index:9999;">
<button class="layui-btn layui-btn-primary layui-btn-lg" id="fab-trigger">
<i class="layui-icon"></i>
</button>
</div>
<script>
layui.use('dropdown', function(){
var dropdown = layui.dropdown;
dropdown.render({
elem: '#fab-trigger',
trigger: 'hover',
align: 'right',
skin: 'layui-bg-blue',
data: [
{title: '问题反馈', id: 'feedback'},
{title: '帮助文档', id: 'docs'},
{type: '-', id: 'sep'},
{title: '联系客服', id: 'support', disabled: false}
],
click: function(obj){
if(obj.id === 'feedback') {
layer.open({type: 2, content: '/feedback.html', area: ['500px','400px']});
}
// 其他分支...
}
});
});
</script>
必须手动处理移动端 hover 失效和点击穿透
在 iOS/Android 上，trigger: 'hover' 基本无效，且点击主按钮后 dropdown 可能不收起，导致后续点击失效。这不是 Layui bug，而是移动浏览器对 hover 的原生限制。
- 检测是否为移动端：用
navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i) - 移动端改用
trigger: 'click'，并手动调用dropdown.hide()在点击后收起 - 主按钮加
touchstart阻止默认行为，避免部分安卓机型点击无响应 - 若需“点击展开 + 再点任意处收起”，要监听
document.click并排除 dropdown 区域 —— 但 Layui dropdown 没暴露内部 DOM ID，稳妥做法是加一个透明遮罩层（position: fixed; top:0;left:0;width:100%;height:100%;z-index:9998;）并在 show 时 append，hide 时 remove
z-index 和安全区适配容易被忽略
右下角悬浮按钮常被手机底部手势条、刘海屏安全区或某些 Android 导航栏遮挡。Layui 默认 z-index 最高只到 9999（layer 弹窗），而系统级 UI 层级可能更高。
- 给外层容器设
z-index: 10000或更高（如100000），确保压过所有页面元素 - 在 iPhone X+ 或安卓全面屏上，用
env(safe-area-inset-bottom)补偿：把bottom改成calc(20px + env(safe-area-inset-bottom)) - 不要用
layer.open({type:1})替代 —— 它会劫持整个页面滚动、插入遮罩层、破坏右下角定位逻辑，且无法脱离父容器流式布局
真正难的不是写出来，而是让这个按钮在 iOS Safari、微信内置浏览器、鸿蒙系统 WebView、以及各种折叠屏设备上都稳稳停在右下角不偏移、不遮挡、不闪退。定位值、z-index、安全区、触发方式这四者必须联动调整，缺一不可。
