File size: 3,981 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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
---
title: "Simple Highlight"
groupTitle: "Examples"
sort: 11
---
import { FormHelp } from "../../components/FormHelp.tsx";
import { CodeSample } from "../../components/CodeSample.tsx";
Product tours is not the only usecase for Driver.js. You can use it to highlight any element on the page and show a popover with a description. This is useful for providing contextual help to the user e.g. help the user fill a form or explain a feature.
Example below shows how to highlight an element and simply show a popover.
<CodeSample
id={"highlight-me"}
buttonText={"Highlight Me"}
config={{
popoverClass: "driverjs-theme",
stagePadding: 4,
}}
highlight={{
element: "#highlight-me",
popover: {
side: "bottom",
title: "This is a title",
description: "This is a description",
},
}}
client:load
/>
Here is the code for above example:
```js
const driverObj = driver({
popoverClass: "driverjs-theme",
stagePadding: 4,
});
driverObj.highlight({
element: "#highlight-me",
popover: {
side: "bottom",
title: "This is a title",
description: "This is a description",
}
})
```
You can also use it to show a simple modal without highlighting any element.
<CodeSample
id={"highlight-me"}
buttonText={"Show Popover"}
highlight={{
popover: {
side: "bottom",
description: "<img src='https://i.imgur.com/EAQhHu5.gif' style='height: 202.5px; width: 270px;' /><span style='font-size: 15px; display: block; margin-top: 10px; text-align: center;'>Yet another highlight example.</span>",
},
}}
client:load
/>
Here is the code for above example:
```js
const driverObj = driver();
driverObj.highlight({
popover: {
description: "<img src='https://i.imgur.com/EAQhHu5.gif' style='height: 202.5px; width: 270px;' /><span style='font-size: 15px; display: block; margin-top: 10px; text-align: center;'>Yet another highlight example.</span>",
}
})
```
Focus on the input below and see how the popover is shown.
<form action="#" className='flex flex-col gap-2'>
<input id="name" type="text" placeholder="Enter your Name" className='block w-full border rounded-md py-2 px-3 focus:outline-0' />
<input id="education" type="text" placeholder="Your Education" className='block w-full border rounded-md py-2 px-3 focus:outline-0' />
<input id="age" type="number" placeholder="Your Age" className='block w-full border rounded-md py-2 px-3 focus:outline-0' />
<textarea id="address" placeholder="Your Address" className='block w-full border rounded-md py-2 px-3 focus:outline-0' />
<button id="submit-btn" className='w-full rounded-md bg-black p-2 text-white'>Submit</button>
</form>
<FormHelp client:only />
Here is the code for the above example.
```js
const driverObj = driver({
popoverClass: "driverjs-theme",
stagePadding: 0,
onDestroyed: () => {
document?.activeElement?.blur();
}
});
const nameEl = document.getElementById("name");
const educationEl = document.getElementById("education");
const ageEl = document.getElementById("age");
const addressEl = document.getElementById("address");
const formEl = document.querySelector("form");
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",
},
});
});
formEl.addEventListener("blur", () => {
driverObj.destroy();
});
``` |