Highlight method doesn't show "X" to close, appears to be marked with style='display:none'
yogat3ch opened this issue · comments
The docs indicate:
Note: When using the highlight method to highlight a single element, the only button shown is the close button.
However, using the following snippet:
const driver = window.driver.js.driver;
const newDriver = new driver({
animate: true,
overlayColor: "black",
smoothScroll: false,
allowClose: true,
overlayOpacity: 0,
stagePadding: 10,
stageRadius: 5,
allowKeyboardControl: true,
disableActiveInteraction: false,
popoverClass: "scoped-class",
popoverOffset: 10,
showProgress: false,
progressText: false,
nextBtnText: "Next",
prevBtnText: "Previous",
doneBtnText: "Done"
});
newDriver.highlight({
element: "#navbar-save_session",
popover: {
title: "Save a Session",
description: "Now is a great time to save your session.",
side: "bottom",
align: "center"
}
})The highlight popover that comes up has the x button to close hidden (I unchecked the property to make it visible):
Seems like this is a bug?
same issue, the close button is not displayed
The docs indicate:
Note: When using the highlight method to highlight a single element, the only button shown is the close button.
However, using the following snippet:
const driver = window.driver.js.driver; const newDriver = new driver({ animate: true, overlayColor: "black", smoothScroll: false, allowClose: true, overlayOpacity: 0, stagePadding: 10, stageRadius: 5, allowKeyboardControl: true, disableActiveInteraction: false, popoverClass: "scoped-class", popoverOffset: 10, showProgress: false, progressText: false, nextBtnText: "Next", prevBtnText: "Previous", doneBtnText: "Done" }); newDriver.highlight({ element: "#navbar-save_session", popover: { title: "Save a Session", description: "Now is a great time to save your session.", side: "bottom", align: "center" } })The highlight popover that comes up has the x button to close hidden (I unchecked the property to make it visible):
Seems like this is a bug?
I`m here again,
This works for me
The docs indicate:
Note: When using the highlight method to highlight a single element, the only button shown is the close button.
However, using the following snippet:
const driver = window.driver.js.driver; const newDriver = new driver({ animate: true, overlayColor: "black", smoothScroll: false, allowClose: true, overlayOpacity: 0, stagePadding: 10, stageRadius: 5, allowKeyboardControl: true, disableActiveInteraction: false, popoverClass: "scoped-class", popoverOffset: 10, showProgress: false, progressText: false, nextBtnText: "Next", prevBtnText: "Previous", doneBtnText: "Done" }); newDriver.highlight({ element: "#navbar-save_session", popover: { title: "Save a Session", description: "Now is a great time to save your session.", side: "bottom", align: "center" } })The highlight popover that comes up has the x button to close hidden (I unchecked the property to make it visible):
Seems like this is a bug?I`m here again, This works for me
@ericvipo This worked! Thank you! I had passed them to the Driver configuration, and I guess the popover method doesn't inherit that setting from the instantiated driver object.
@ericvipo So the close button is showing after adding showButton to the popover configuration.... but the button doesn't do anything. I have allowClose set to true to allow click outside to close out, but that shouldn't affect whether the close button works?
Hi @kamranahmedse, thank you for your authorship on driver.js. I've been looking into this for a while and I noticed in #193 that the Close button was added as an option to the highlight method via showButtons, but it appears that functionality to have that button actually close the popover wasn't included. This seems like a bug.
Here's a small reproducible example:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js" defer></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reprex</title>
</head>
<body>
<script type="text/javascript">
const tip_me = () => {
debugger;
const driver = window.driver.js.driver;
const newDriver = new driver({
animate: true,
overlayColor: "black",
smoothScroll: false,
allowClose: true,
overlayOpacity: 0.5,
stagePadding: 10,
stageRadius: 5,
allowKeyboardControl: true,
disableActiveInteraction: false,
popoverClass: "scoped-class",
popoverOffset: 10,
showProgress: false,
progressText: false,
showButtons: "close",
nextBtnText: "Next",
prevBtnText: "Previous",
doneBtnText: "Done"
});
newDriver.highlight({
element: "#my-id",
popover: {
title: "Tooltip title",
description: "Tooltip description",
showButtons: "close",
popoverClass: "scoped-class",
showProgress: false,
progressText: false,
nextBtnText: "Next",
prevBtnText: "Previous",
doneBtnText: "Done"
}
});
}
</script>
<button id="my-id" onclick="tip_me()">Tooltip this button</button>
</body>
</html>The expected behavior would have the popover highlight close when the x is pressed, but nothing happens.
I've attempted to accomplish this with the onCloseClick callback, but I can't figure out how to access the popover and close it with JS from within the callback.
@ericvipo We ended up figuring out how to pass a custom callback (solution below). Can this be made the default behavior of the close button if no callback is provided by the user?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js" defer></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reprex</title>
</head>
<body>
<script type="text/javascript">
const tip_me = () => {
debugger;
const driver = window.driver.js.driver;
const newDriver = new driver({
animate: true,
overlayColor: "black",
smoothScroll: false,
allowClose: true,
overlayOpacity: 0.5,
stagePadding: 10,
stageRadius: 5,
allowKeyboardControl: true,
disableActiveInteraction: false,
popoverClass: "scoped-class",
popoverOffset: 10,
showProgress: false,
progressText: false,
showButtons: "close",
nextBtnText: "Next",
prevBtnText: "Previous",
doneBtnText: "Done"
});
newDriver.highlight({
element: "#my-id",
popover: {
title: "Tooltip title",
description: "Tooltip description",
showButtons: "close",
popoverClass: "scoped-class",
showProgress: false,
progressText: false,
nextBtnText: "Next",
prevBtnText: "Previous",
doneBtnText: "Done",
onCloseClick: () => {
newDriver.destroy();
}
}
});
}
</script>
<button id="my-id" onclick="tip_me()">Tooltip this button</button>
</body>
</html>