Interactive Walkthrough

[gustavoSponholz]

How could I create this type of step by step on the weweb? Is it possible to fix the modal in a fixed position?

[mark]

In the settings for the modal you can set the position to wherever you’d like by setting the position setting to “custom”. Then it will open up more options for you to fine tune it.

[Himanshu]

You can do what Mark suggested or a simple div. It gives slightly more control at the cost of complexity

[archenia_jsanchez]

I did something similar, but without the spotlight and a bit more rigid. Below you see that I have a pulsing blue blob overlaid on top of the date dropdown. Note, I built this several months ago at a time when I was still learning WeWeb so my “development” might be a bit sloppy, and my memory of it is a bit rusty; nonetheless happy to help and hope this jumpstarts some of your work.

1. I created a custom component that includes the pulsing “blob” (aka marker) and the popover and I next this absolutely positioned within a bounding box that encompasses the UI that I want to map it to. The component has attributes for ID and position (as well as the object feeding the contents)

2. I then have an object which stores the state and contents of the popover; btw, I don’t think hint_name is relevant in my project so ignore that for now.

3. Looking at the UI, if close, then opened = false; if hide hints, visible = false; if click previous (not pictured) or next, then increment current index. Combination of all these tells the UI which hint to display. I have an element in a separate help menu to “revisit this experience” if the user “hides hints” at any point.

4. the CSS for the blob is in a custom CSS component

<style>
.blob {
    background: #2658E6;
    border-radius: 50%;
    margin: 0px;
    height: 12px !important;
    width: 12px !important;
    box-shadow: 0 0 0 0 rgba(38, 88, 230, 1);
    transform: scale(1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(38, 88, 230, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(38, 88, 230, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(38, 88, 230, 0);
	}
}
</style>

[WeeeeeWeb]

Did something similar to @archenia_jsanchez. Basically progressing the message and popup via index in the buttons.

Was actually thinking if the popup could be associated to the click/touch XY position updating it in the variable?

[archenia_jsanchez]

@WeeeeeWeb

Was actually thinking if the popup could be associated to the click/touch XY position updating it in the variable?

I’ve done this in a few places, namely hijacking Modal where I pull the X/Y from mouseEnter or onClick, set the respective variable and then pass that into the modal X/Y coordinates. Unfortunately it never comes out as elegant as I want it—I think it looks out of place if it appears precisely where the mouse entered, and I haven’t taken the time to figure out the right offset, OR when mouseEnter I would want the tooltip to be a few pixels from the cursor and follow until mouseLeave— and I’m not patient enough to fiddle with it at the moment.

** I have since moved away from these modals for tooltips and hijacked the Dropdown to achieve the same outcome.

[Trojan]

Hi @gustavoSponholz You can make use of external library like driver.js though you will have to write some custom javascript because it is basically dependent on targeting the elements which we can directly do using id or may be class selector