Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow highlighting multiple elements per step #525

Closed
jujaysmile opened this issue Aug 20, 2019 · 21 comments · Fixed by #967 · May be fixed by #2083
Closed

Allow highlighting multiple elements per step #525

jujaysmile opened this issue Aug 20, 2019 · 21 comments · Fixed by #967 · May be fixed by #2083
Assignees

Comments

@jujaysmile
Copy link

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
Copy link
Member

@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
Copy link
Author

@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

debug

Thanks for your help !

@RobbieTheWagner
Copy link
Member

@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
Copy link
Author

jujaysmile commented Aug 20, 2019

@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
Copy link
Member

@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
Copy link
Author

@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 RobbieTheWagner changed the title attachTo element with absolute child Allow highlighting multiple elements per step Aug 22, 2019
@RobbieTheWagner
Copy link
Member

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

@stale
Copy link

stale bot commented Sep 24, 2019

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
Copy link

stale bot commented Nov 1, 2019

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 stale bot added the wontfix label Nov 1, 2019
@stale
Copy link

stale bot commented Dec 1, 2019

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
Copy link

stale bot commented Dec 31, 2019

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 stale bot added the wontfix label Dec 31, 2019
@Heziode
Copy link

Heziode commented Jan 14, 2020

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

@stale
Copy link

stale bot commented Feb 13, 2020

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
Copy link

stale bot commented Mar 14, 2020

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
Copy link

stale bot commented Apr 14, 2020

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 stale bot added the wontfix label Apr 14, 2020
@RobbieTheWagner
Copy link
Member

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

@stale stale bot removed the wontfix label Apr 14, 2020
@chuckcarpenter chuckcarpenter self-assigned this Apr 14, 2020
@chuckcarpenter
Copy link
Member

@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.,

image

@RobbieTheWagner
Copy link
Member

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

@akhoury
Copy link

akhoury commented May 4, 2020

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
Copy link
Member

@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
Copy link

akhoury commented May 4, 2020

ah ok, right. thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants