Layui layer.tips提示框怎么设置方向和颜色-Layui教程-PHP中文网

layer.tips的tips参数须为number或array：单数字如3仅设方向（1上、2右、3下、4左），数组如[3,'#fff']才同时指定方向和颜色；颜色必须带#号，支持rgba；需手动管理索引避免闪退，移动端错位需注意transform和滚动容器影响。

layer.tips 的 `tips` 参数到底怎么写？

tips 不是布尔值或字符串，而是 Number 或 Array：

单数字（如 tips: 3）只设方向，颜色用默认黑色
数组（如 tips: [3, '#ffffff']）才同时指定方向和颜色

方向编号固定为 1–4：

1：上方
2：右侧
3：下方（最常用，比如按钮悬停说明）
4：左侧

别写成 tips: 'bottom' 或 tips: 'down' —— layui 不认字符串方向，会静默退化为默认值 2（右侧），且不报错。

为什么改了颜色还是黑的？

常见错误是漏掉数组结构，或者颜色值格式不对：

❌ tips: [3, 'white'] → 浏览器不识别 'white' 为有效 CSS 颜色，回退到黑色
❌ tips: 3, tipsColor: '#fff' → tipsColor 不是 layer 的合法参数，直接被忽略
✅ 正确写法只有 tips: [3, '#ffffff'] 或简写 tips: [3, '#fff']

另外注意：颜色值必须带 #，不能省略；RGB、RGBA 写法也支持，比如 [3, 'rgba(255,100,100,0.9)']。

鼠标移入弹出、移出关闭，怎么避免闪退或残留？

关键在手动管理索引，不能靠 time: 0 + 自动销毁：

time: 0 表示“永不自动关闭”，但如果不存索引、不调 layer.close()，提示框就会卡住
多次快速进出容易触发多个 tips 叠加，得用 tipsMore: false（默认就是 false，但显式写出更安心）

推荐写法：

let tipIndex = null;
$('#myInput').on('mouseenter', function() {
  const content = '请输入邮箱格式';
  tipIndex = layer.tips(content, this, {
    tips: [2, '#00a65a'],
    area: ['220px', 'auto'],
    tipsMore: false
  });
}).on('mouseleave', function() {
  if (tipIndex) layer.close(tipIndex);
});