Allow highlighting multiple elements per step

[jujaysmile]

Hi,

I want to attach a step to an element with fixed width & height, this element has a div child (a dropdown content) positioned with the "absolute" css property.

When i configure the attachTo; element: '.parent-element'. the opac layer cover the entire screen, except my element, but the child element is not visible and covered by the opac layer.

Do you have any solution to not cover the parent element and his child ? or a way to specify multiple highlighted elements ?

Thanks

[RobbieTheWagner]

@jujaysmile I'm not sure I understand, is the child element not inside the parent? If the parent is highlighted, the child should be as well. Can you provide a small example for us to play with?

[jujaysmile]

@rwwagner90 hi, yes, the child element is inside the parent.

Here is my code

HTML

<div class="parent">
  
  <p>Parent (menu button)</p>

  <div class="child">

    <p>Child (dropdown content)</p>

  </div>

</div>

CSS

.parent {
  position: relative;
  width: 20rem;
  height: 15rem;
  background-color: red;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  width: 25rem;
  height: 20rem;
  background-color: yellow;
}

JS

const tour = new Shepherd.Tour({
  tourName: 'debug-tour',
  useModalOverlay: true,
  defaultStepOptions: {
    classes: 'c-onboarding-modal',
    scrollTo: true,
    scrollToHandler: this.scrollToHandler
  },
  styleVariables: styles,
  disableScroll: true
});

tour.addStep({
  title: 'Debug',
  text: 'Lorem ipsum...',
  attachTo: {
    element: '.parent', 
    on: 'left'
  }
});

tour.start();

And here a screenshot

Thanks for your help !

[RobbieTheWagner]

@jujaysmile The issue is you are setting a width and height on the parent. We use getBoundingClientRect to get the size of the element and highlight it. You'll have to allow the size to grow to accommodate the child. You could also try setting a super large modalOverlayOpeningPadding to add extra space to the opening, but that's likely not going to work super well.

[jujaysmile]

@rwwagner90 OK, thanks for your answer, I understand the problem. Do you know if there is a way to specify multiple highlighted elements (in this case .parent & .child), i think it will be the perfect solution in this case.

[RobbieTheWagner]

@jujaysmile it's not currently supported. There was an issue opened for it in the past #356

The problem is if you allowed multiple elements in attachTo how would we know what to attach the tooltip to? We would have to add a new option to add additional highlighted items and create openings for them. Is this something you would like to work on perhaps?

[jujaysmile]

@rwwagner90, ok. I am currently working on a big project and don't have a lot of time right now. But maybe in some times. I am interested by the concept of your tool.

[RobbieTheWagner]

@jujaysmile When do you think you might have some time?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Heziode]

Another usecase is to "highlight" a column of a table.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[RobbieTheWagner]

@chuckcarpenter would you want to take a stab at this one?

[chuckcarpenter]

@Heziode that's a great use case and had us looking in how this could be supported without a big refactor. You can actually use absolute positioning around the colgroup in your table to accomplish this pretty quickly. e.g.,

[RobbieTheWagner]

@chuckcarpenter should we document your approach here in the cookbook and then close the posibility of highlighting multiple things for now?

[akhoury]

The colgroup solution wouldn't work on multiple rows? say you have a <tr colspan=x> which represents a section of the following <tr>s, for example

https://codepen.io/akhoury/pen/KKdZVPm?editors=0011

edit: I did solve my issue with having multiple <tbody> tags, one for each section, it would still be nice to "add additional highlighted items" as mentioned by @rwwagner90

[RobbieTheWagner]

@akhoury I believe we were saying you can create a div or some absolute positioned element over the thing you want to highlight, and then you can use that as the target, thus highlighting everything.

[akhoury]

ah ok, right. thanks.