File size: 1,673 Bytes
470d5fa |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import { useEffect } from "react";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
export function FormHelp() {
useEffect(() => {
const driverObj = driver({
popoverClass: "driverjs-theme",
stagePadding: 0,
onDestroyed: () => {
(document?.activeElement as any)?.blur();
}
});
const nameEl = document.getElementById("name");
const educationEl = document.getElementById("education");
const ageEl = document.getElementById("age");
const addressEl = document.getElementById("address");
const submitEl = document.getElementById("submit-btn");
nameEl!.addEventListener("focus", () => {
driverObj.highlight({
element: nameEl!,
popover: {
title: "Name",
description: "Enter your name here",
},
});
});
educationEl!.addEventListener("focus", () => {
driverObj.highlight({
element: educationEl!,
popover: {
title: "Education",
description: "Enter your education here",
},
});
});
ageEl!.addEventListener("focus", () => {
driverObj.highlight({
element: ageEl!,
popover: {
title: "Age",
description: "Enter your age here",
},
});
});
addressEl!.addEventListener("focus", () => {
driverObj.highlight({
element: addressEl!,
popover: {
title: "Address",
description: "Enter your address here",
},
});
});
submitEl!.addEventListener("focus", (e) => {
e.preventDefault();
driverObj.destroy();
});
});
return <></>;
}
|