Create a product-tour coachmark with Tailwind CSS: a mock toolbar with three buttons where the middle one is spotlighted by a ring. Anchored below it, a dark rounded popover positioned absolutely against the highlighted button, with an arrow notch made from a rotated square, a step counter such as "Step 2 of 4", a short title, a sentence of guidance, a row of four progress dots with the current one wider and lighter, and Skip tour plus Next actions. Because the popover is absolutely positioned it contributes no flow height, so add generous bottom padding on the wrapper to reserve room for it. Then add JavaScript holding the tour copy in an array so Next advances the counter, title, body, and dots, the last step reads Done, and either Done or Skip tour removes the coachmark.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a product-tour coachmark with Tailwind CSS: a mock toolbar with three buttons where the middle one is spotlighted by a ring. Anchored below it, a dark rounded popover positioned absolutely against the highlighted button, with an arrow notch made from a rotated square, a step counter such as "Step 2 of 4", a short title, a sentence of guidance, a row of four progress dots with the current one wider and lighter, and Skip tour plus Next actions. Because the popover is absolutely positioned it contributes no flow height, so add generous bottom padding on the wrapper to reserve room for it. Then add JavaScript holding the tour copy in an array so Next advances the counter, title, body, and dots, the last step reads Done, and either Done or Skip tour removes the coachmark.
var TOUR = [
{ title: "Start from your drafts", body: "Anything unfinished waits here. Nothing is published until you say so." },
{ title: "Automate the repetitive part", body: "Rules live here. Start from a template and adjust the trigger — nothing runs until you enable it." },
{ title: "Watch the numbers", body: "Reports refresh every fifteen minutes. Pin the ones your team actually reads." },
{ title: "That is the tour", body: "You can reopen it any time from the help menu in the top right." }
];
var count = document.getElementById("tourCount");
var title = document.getElementById("tourTitle");
var body = document.getElementById("tourBody");
var dots = [].slice.call(document.querySelectorAll("#tourDots span"));
var next = document.getElementById("tourNext");
var skip = document.getElementById("tourSkip");
var mark = document.getElementById("coachmark");
var index = 1; // the markup opens on step 2, where the highlight already sits
function render() {
count.textContent = "Step " + (index + 1) + " of " + TOUR.length;
title.textContent = TOUR[index].title;
body.textContent = TOUR[index].body;
next.textContent = index === TOUR.length - 1 ? "Done" : "Next";
dots.forEach(function (dot, i) {
dot.className =
"h-1.5 rounded-full " + (i === index ? "w-4 bg-white" : "w-1.5 bg-neutral-600");
});
}
function end() {
mark.remove();
}
next.addEventListener("click", function () {
if (index < TOUR.length - 1) {
index += 1;
render();
} else {
end();
}
});
skip.addEventListener("click", end);
render();
