Shepherd.js如何将提示框箭头移至另一侧边缘？

你好呀！我完全懂你的需求——就是想把Shepherd.js提示框的箭头挪到提示框的另一侧边缘，精准指向“Jobs I'm Working”这个元素对吧？而且你已经想到从CSS入手调整，这个思路特别对！

从你描述的场景能看到，当前箭头的位置不符合预期，你也尝试了一些CSS代码，但可能还差几个关键调整。默认情况下，Shepherd的箭头是靠绝对定位和transform属性来控制位置的，咱们只需要针对你这个特定的步骤（id为jobs-working）微调几个属性就行：

/* 针对"jobs-working"步骤的箭头自定义样式 */
[data-shepherd-step-id="jobs-working"] .shepherd-arrow {
  /* 覆盖默认left定位，改用right来固定到提示框右边缘 */
  left: auto;
  /* 让箭头距离提示框右边缘10px，你可以根据需求调整这个数值 */
  right: 10px;
  /* 取消默认的平移偏移，让箭头保持在设置的位置 */
  transform: translateX(0);
}

/* 如果箭头指向方向不对，再加上这段调整边框颜色 */
[data-shepherd-step-id="jobs-working"] .shepherd-arrow::before {
  /* 隐藏默认的左侧边框 */
  border-left-color: transparent;
  /* 替换成你的提示框背景色，让箭头指向左侧目标元素 */
  border-right-color: #你的提示框背景色值;
}

给你拆解下这段代码的作用：

• 用left: auto清空默认的left定位，改用right: 10px把箭头牢牢固定在提示框的右边缘内侧，你可以根据自己的布局需求调整10px这个数值
• 取消默认的transform平移，避免箭头被额外偏移
• 最后如果箭头的指向方向反了，就调整伪元素的边框颜色——因为Shepherd的箭头是用CSS边框实现的，把不需要的边框设为透明，保留对应方向的边框就能让箭头指向目标元素

你之前写的代码已经有了基础调整，补上left: auto和边框颜色的设置，应该就能完美达到你想要的效果啦！

备注：内容来源于stack exchange，提问作者who-aditya-nawandar