一个有关前端页面/用户向导的技术问题，绞尽脑汁想了半天，头晕脑胀，特来请教一下大家

[yazoox]

我们的产品使用的是 react + typescript 开发的 web app/前端页面。

产品中，经常会需要在页面中间弹出一个 dialog （当然，这个都是 div 等元素合成的），已经实现了。PM 想针对这个 dialog ，制作产品向导(product tour)。于是我 google 了一把，还好，现在有一些成熟的工具。

但是 PM 的要求很不一般，不是开屏杀。而是需要用户操作到某一个页面后，比如，打开了某个 dialog ，针对这个 dialog 上面几个组件，比如，input text, list ，ok button ，等等，做三个页面向导（还是很花里胡哨的向导，我找到的工具，基本上向导里的都是纯 text ，还不能使用 react 定制页面，要么就是要收费的，比如 intro.js ）。然后，等用户点击了 ok button ，切换到另外一个页面/dialog ，再制作几个向导。

所以，研究了几个工具，貌似都不太好实现。所以特意来请教一下大家。看看没有什么思路。

• 自己写？针对某个页面上的元素，在它的旁边弹一个 float 在最上面的窗口，有没有比较好用的库。（或者搜索关键字是有没有推荐）
• 或者有没有 包/库 能够实现这个需求，我没有找到的？
• 或者现在的包就够用，我的思路有问题？

等等...

谢谢大家

p.s.
https://www.chameleon.io/blog/javascript-product-tours
https://userguiding.com/blog/react-onboarding-tour/
https://blog.bitsrc.io/7-awesome-javascript-web-app-tour-libraries-6b5d220fb862

[xomix]

你们 pm 是不是想要国产哪种点着点着一个视频看完不再出现的哪种提示？

[SimonTart]

https://driverjs.com/ 你需要这个

[790002517zzy]

这个比 2 楼那个更好用，二楼那个层级老是有问题，回调也少
https://github.com/josias-r/boarding.js

[yazoox]

@SimonTart 这个好像比前面我自己找到的几个强大一些。但是，所以这些 tour ，都只能渲染一段 text ，我需要的渲染的一个页面到 tour 里面去。
driver.js ，好像可以定制 dom ，不知道能否搞定。我试试吧......
万分感谢

[gkinxin]

@yazoox #4 antd5 也有 tour ，是可以渲染页面