shipshapecode / shipshapecode/shepherd

Separate selectors for modal overlay cutout target and popper target

Open
#1,836 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
13.8k
Forks
658
Avg merge
4d 5h
Merged PRs (30d)
15

Description

I'm using the modal overlay in my Shepherd tour, but I'd like to point the tooltip at a specific element that's inside the cutout area. Here's an example, I'd like the tooltip to point directly at the orange button. I tried using left-start to move it to the top, but unfortunately no amount of configuration will get the arrow to point directly at the button:

Screen Shot 2022-03-03 at 3 06 59 PM

It'd be great if attachTo had an optional second element attribute for either popper target, or the overlay cutout target, so that they can be two separate elements. By default they should both be the same. Not sure if you'd rather an option for each, or go with just one or the other.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the attachTo configuration and the modal overlay, popper target, and overlay cutout behavior described in the issue. Define separate selectors for the popper and cutout targets, while preserving the current behavior when only one target is supplied; done means the tooltip arrow can point to the orange button independently of the cutout.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.