docs/src/content/guides/buttons.mdx
import { CodeSample } from "../../components/CodeSample.tsx";
You can use the showButtons option to choose which buttons to show in the popover. The default value is ['next', 'previous', 'close'].
const driverObj = driver({
showButtons: [
'next',
'previous',
'close'
],
steps: [
{
element: '#first-element',
popover: {
title: 'Popover Title',
description: 'Popover Description'
}
},
{
element: '#second-element',
popover: {
title: 'Popover Title',
description: 'Popover Description'
}
}
]
});
driverObj.drive();
```
You can also change the text of buttons using nextBtnText, prevBtnText and doneBtnText options.
const driverObj = driver({
nextBtnText: '—›',
prevBtnText: '‹—',
doneBtnText: '✕',
showProgress: true,
steps: [
// ...
]
});
driverObj.drive();
```
You can use the onNextClick, onPreviousClick and onCloseClick callbacks to implement custom functionality when the user clicks on the next and previous buttons.
Please note that when you configure these callbacks, the default functionality of the buttons will be disabled. You will have to implement the functionality yourself.
<CodeSample buttonText={"Show Example"} config={{}} tour={[ { element: '#logger-events', popover: { title: 'Events Logged', description: 'Look at your console for the events logged' } }, { element: '#code-sample-4 code', popover: { title: 'Popover Title', description: 'Popover Description' } } ]} id={"logger-events"} client:load>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver({
onNextClick:() => {
console.log('Next Button Clicked');
// Implement your own functionality here
driverObj.moveNext();
},
onPrevClick:() => {
console.log('Previous Button Clicked');
// Implement your own functionality here
driverObj.movePrevious();
},
onCloseClick:() => {
console.log('Close Button Clicked');
// Implement your own functionality here
driverObj.destroy();
},
steps: [
// ...
]
});
driverObj.drive();
You can add custom buttons using onPopoverRender callback. This callback is called before the popover is rendered. In the following example, we are adding a custom button that takes the user to the first step.
<CodeSample buttonText={"Run Example"} config={{ prevBtnText: '← Previous', nextBtnText: 'Next →', doneBtnText: 'Done', showButtons: ['next', 'previous'], }} tour={[ { element: '#demo-hook-theme', popover: { align: 'start', side: 'left', title: 'More Control with Hooks', description: 'You can use onPopoverRender hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.' } }, { element: 'h1', popover: { align: 'start', side: 'bottom', title: 'Style However You Want', description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.' } }, { element: 'p a', popover: { align: 'start', side: 'left', title: 'Style However You Want', description: 'You can use the default class names and override the styles or you can pass a custom class name to the popoverClass option either globally or per step.' } } ]} id={"demo-hook-theme"} client:load
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver({
// Get full control over the popover rendering.
// Here we are adding a custom button that takes
// user to the first step.
onPopoverRender: (popover, { config, state }) => {
const firstButton = document.createElement("button");
firstButton.innerText = "Go to First";
popover.footerButtons.appendChild(firstButton);
firstButton.addEventListener("click", () => {
driverObj.drive(0);
});
},
steps: [
// ..
]
});
driverObj.drive();