Backdrop highlight target

[dotsoftwarenl]

Hi,

The screenshot below only shows the vjt-tour element highlighted, but I would like to also highlight the section whilst using backdrop. Is there a way to also highlight the target instead of the blue line around it?

Love the package so far!

[GlobalHive]

Hi @dotsoftwarenl, it should do that already when using the highlight.

How did you setup the Tour? Or: Looks like you changed the styling a bit, make sure to keep the z-index of vjt-hightlight above the backdrop.

[chboing]

Hello, i've been testing your lib but I'm using Quasar framework for vuejs,, and i'm facing a problem. When you're using some component like q-splitter, they redefine a stacking context (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) by setting position: relative in the comp CSS So it's not possible to slip a z-index above the backdrop because it's not in the same stacking context. I think there is no solution to this as it is.

This would be solved for any cases, if the backdrop was not a single div, but 4 divs instead like so:

what do you think ? maybe another prop on VTour to enable the splitted backdrop ? This would mean i can use your lib

ps: you can use this if you want, those are the styles needed for the 4 divs with my simple usecase.

const styles = {
  left: { top: '0px', left: '0px', width: `${highlightedElem_BoundingClientRect.left}px`, height: `${browserHeigt}px` },
  right: {
    top: '0px',
    right: '0px',
    width: `${browserWidht - (highlightedElem_BoundingClientRect.left + highlightedElem_BoundingClientRect.width)}px`,
    height: `${browserHeigt}px`,
  },
  top: {
    top: '0px',
    left: `${highlightedElem_BoundingClientRect.left}px`,
    right: '0px',
    width: `${highlightedElem_BoundingClientRect.width}px`,
    height: `${highlightedElem_BoundingClientRect.top}px`,
  },
  bottom: {
    top: `${highlightedElem_BoundingClientRect.top + highlightedElem_BoundingClientRect.height}px`,
    left: `${highlightedElem_BoundingClientRect.left}px`,
    right: '0px',
    width: `${highlightedElem_BoundingClientRect.width}px`,
    height: `${browserHeigt - (highlightedElem_BoundingClientRect.top + highlightedElem_BoundingClientRect.height)}px`,
  },
}

[GlobalHive]

Hello @chboing

Thank you for your response. If Quasar redefines the stacking context, then yes, VueJS-Tour will not function as expected.

I will add a "Quasar switch" prop to the component, utilizing your 4-div approach. Could you please open a new issue for this so I can close the current one, as it appears to be resolved or inactive?

Sincerely, Sascha

[chboing]

Just created a ticket here : https://github.com/GlobalHive/vuejs-tour/issues/67 👍