Skip to content

Commit 84c2176

Browse files
📝 Add cookbook item for multi item highlighting (#967)
1 parent d21f123 commit 84c2176

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

docs-src/tutorials/04-cookbook.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,26 @@ as a dependency, in favor of users installing it directly in their apps. To disa
66
you can install `body-scroll-lock` and run `bodyScrollLock.disableBodyScroll();` before
77
starting the tour, then `bodyScrollLock.clearAllBodyScrollLocks();` after stopping the tour.
88

9+
### Highlighting multiple elements
10+
11+
The most obvious use case for this, is around a group of elements, or more specifically the column in a TABLE. This can be achieved using CSS to absolutely position the element and give it the width and height you need. e.g.,
12+
13+
```html
14+
<colgroup class="shepherd-step-highlight">
15+
```
16+
and setting your CSS to something like:
17+
18+
```css
19+
colgroup.shepherd-step-highlight {
20+
display: block;
21+
height: 100px;
22+
position: absolute;
23+
width: 200px;
24+
}
25+
```
26+
27+
Similar results could be had by adding elements purely for the purpose of exposing more than one element in the overlay and positioning the element absolutely.
28+
929
### Offsets
1030

1131
By default, Popper instances are placed directly next to their target. However, if you need to apply some margin

0 commit comments

Comments
 (0)