0
# Overlay Components
1

2
Modal dialogs, tooltips, popovers and off-canvas components for layered interfaces.
3

4
## Capabilities
5

6
### Modal
7

8
Modal dialog component for displaying content in a layer above the page.
9

10
```typescript { .api }
11
/**
12
 * Modal component for dialog overlays
13
 * @param show - Show/hide state
14
 * @param onHide - Hide handler
15
 * @param size - Modal size
16
 * @param fullscreen - Fullscreen mode
17
 * @param centered - Center vertically
18
 * @param backdrop - Backdrop behavior
19
 * @param keyboard - Keyboard close support
20
 */
21
function Modal(props: ModalProps): JSX.Element;
22

23
interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
24
  /** Show/hide state */
25
  show?: boolean;
26
  /** Hide handler */
27
  onHide?: () => void;
28
  /** Modal size */
29
  size?: "sm" | "lg" | "xl";
30
  /** Fullscreen mode */
31
  fullscreen?: boolean | "sm-down" | "md-down" | "lg-down" | "xl-down" | "xxl-down";
32
  /** Center vertically */
33
  centered?: boolean;
34
  /** Backdrop behavior */
35
  backdrop?: boolean | "static";
36
  /** Keyboard close support */
37
  keyboard?: boolean;
38
  /** Scroll behavior */
39
  scrollable?: boolean;
40
  /** Animation */
41
  animation?: boolean;
42
  /** Auto focus */
43
  autoFocus?: boolean;
44
  /** Enforce focus */
45
  enforceFocus?: boolean;
46
  /** Restore focus */
47
  restoreFocus?: boolean;
48
  /** Show handler */
49
  onShow?: () => void;
50
  /** Enter handler */
51
  onEnter?: () => void;
52
  /** Entering handler */
53
  onEntering?: () => void;
54
  /** Entered handler */
55
  onEntered?: () => void;
56
  /** Exit handler */
57
  onExit?: () => void;
58
  /** Exiting handler */
59
  onExiting?: () => void;
60
  /** Exited handler */
61
  onExited?: () => void;
62
  /** Bootstrap CSS class prefix */
63
  bsPrefix?: string;
64
}
65
```
66

67
### ModalHeader
68

69
Header section of modal with optional close button.
70

71
```typescript { .api }
72
/**
73
 * ModalHeader component for modal headers
74
 * @param closeButton - Show close button
75
 * @param onHide - Close handler
76
 */
77
function ModalHeader(props: ModalHeaderProps): JSX.Element;
78

79
interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
80
  /** Show close button */
81
  closeButton?: boolean;
82
  /** Close handler */
83
  onHide?: () => void;
84
  /** Bootstrap CSS class prefix */
85
  bsPrefix?: string;
86
}
87
```
88

89
### ModalBody
90

91
Body section of modal for main content.
92

93
```typescript { .api }
94
/**
95
 * ModalBody component for modal body content
96
 */
97
function ModalBody(props: ModalBodyProps): JSX.Element;
98

99
interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
100
  /** Bootstrap CSS class prefix */
101
  bsPrefix?: string;
102
}
103
```
104

105
### ModalFooter
106

107
Footer section of modal for actions.
108

109
```typescript { .api }
110
/**
111
 * ModalFooter component for modal footers
112
 */
113
function ModalFooter(props: ModalFooterProps): JSX.Element;
114

115
interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
116
  /** Bootstrap CSS class prefix */
117
  bsPrefix?: string;
118
}
119
```
120

121
### ModalTitle
122

123
Title component for modal headers.
124

125
```typescript { .api }
126
/**
127
 * ModalTitle component for modal titles
128
 */
129
function ModalTitle(props: ModalTitleProps): JSX.Element;
130

131
interface ModalTitleProps extends React.HTMLAttributes<HTMLElement> {
132
  /** Component used for the root node */
133
  as?: React.ElementType;
134
  /** Bootstrap CSS class prefix */
135
  bsPrefix?: string;
136
}
137
```
138

139
**Modal Usage Examples:**
140

141
```typescript
142
import { Modal, Button } from "react-bootstrap";
143

144
function ModalExample() {
145
  const [show, setShow] = useState(false);
146

147
  const handleClose = () => setShow(false);
148
  const handleShow = () => setShow(true);
149

150
  return (
151
    <>
152
      <Button variant="primary" onClick={handleShow}>
153
        Launch demo modal
154
      </Button>
155

156
      <Modal show={show} onHide={handleClose}>
157
        <Modal.Header closeButton>
158
          <Modal.Title>Modal heading</Modal.Title>
159
        </Modal.Header>
160
        <Modal.Body>
161
          Woohoo, you're reading this text in a modal!
162
        </Modal.Body>
163
        <Modal.Footer>
164
          <Button variant="secondary" onClick={handleClose}>
165
            Close
166
          </Button>
167
          <Button variant="primary" onClick={handleClose}>
168
            Save Changes
169
          </Button>
170
        </Modal.Footer>
171
      </Modal>
172
    </>
173
  );
174
}
175

176
// Centered modal
177
<Modal show={show} onHide={handleClose} centered>
178
  <Modal.Header closeButton>
179
    <Modal.Title>Centered Modal</Modal.Title>
180
  </Modal.Header>
181
  <Modal.Body>This modal is vertically centered.</Modal.Body>
182
</Modal>
183

184
// Large modal
185
<Modal size="lg" show={show} onHide={handleClose}>
186
  <Modal.Header closeButton>
187
    <Modal.Title>Large Modal</Modal.Title>
188
  </Modal.Header>
189
  <Modal.Body>This is a large modal.</Modal.Body>
190
</Modal>
191

192
// Fullscreen modal
193
<Modal show={show} fullscreen onHide={handleClose}>
194
  <Modal.Header closeButton>
195
    <Modal.Title>Fullscreen Modal</Modal.Title>
196
  </Modal.Header>
197
  <Modal.Body>This modal is fullscreen.</Modal.Body>
198
</Modal>
199
```
200

201
### Tooltip
202

203
Tooltip component for contextual information.
204

205
```typescript { .api }
206
/**
207
 * Tooltip component for contextual information
208
 * @param id - Unique identifier
209
 * @param placement - Tooltip placement
210
 */
211
function Tooltip(props: TooltipProps): JSX.Element;
212

213
interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
214
  /** Unique identifier */
215
  id: string;
216
  /** Tooltip placement */
217
  placement?: "auto" | "top" | "bottom" | "left" | "right";
218
  /** Arrow visibility */
219
  arrowProps?: any;
220
  /** Show state */
221
  show?: boolean;
222
  /** Popper configuration */
223
  popper?: any;
224
  /** Bootstrap CSS class prefix */
225
  bsPrefix?: string;
226
}
227
```
228

229
**Tooltip Usage Examples:**
230

231
```typescript
232
import { Tooltip, OverlayTrigger, Button } from "react-bootstrap";
233

234
// Basic tooltip
235
<OverlayTrigger
236
  placement="right"
237
  delay={{ show: 250, hide: 400 }}
238
  overlay={<Tooltip id="button-tooltip">Simple tooltip</Tooltip>}
239
>
240
  <Button variant="success">Hover me to see tooltip</Button>
241
</OverlayTrigger>
242

243
// Tooltip with HTML content
244
<OverlayTrigger
245
  placement="top"
246
  overlay={
247
    <Tooltip id="tooltip-top">
248
      <strong>Holy guacamole!</strong> Check this info.
249
    </Tooltip>
250
  }
251
>
252
  <Button variant="secondary">Tooltip on top</Button>
253
</OverlayTrigger>
254
```
255

256
### Popover
257

258
Popover component for rich contextual information.
259

260
```typescript { .api }
261
/**
262
 * Popover component for rich contextual information
263
 * @param id - Unique identifier
264
 * @param placement - Popover placement
265
 * @param title - Popover title
266
 */
267
function Popover(props: PopoverProps): JSX.Element;
268

269
interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
270
  /** Unique identifier */
271
  id: string;
272
  /** Popover placement */
273
  placement?: "auto" | "top" | "bottom" | "left" | "right";
274
  /** Popover title */
275
  title?: React.ReactNode;
276
  /** Arrow visibility */
277
  arrowProps?: any;
278
  /** Show state */
279
  show?: boolean;
280
  /** Popper configuration */
281
  popper?: any;
282
  /** Bootstrap CSS class prefix */
283
  bsPrefix?: string;
284
}
285
```
286

287
### PopoverHeader
288

289
Header component for popovers.
290

291
```typescript { .api }
292
/**
293
 * PopoverHeader component for popover headers
294
 */
295
function PopoverHeader(props: PopoverHeaderProps): JSX.Element;
296

297
interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
298
  /** Component used for the root node */
299
  as?: React.ElementType;
300
  /** Bootstrap CSS class prefix */
301
  bsPrefix?: string;
302
}
303
```
304

305
### PopoverBody
306

307
Body component for popovers.
308

309
```typescript { .api }
310
/**
311
 * PopoverBody component for popover bodies
312
 */
313
function PopoverBody(props: PopoverBodyProps): JSX.Element;
314

315
interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
316
  /** Component used for the root node */
317
  as?: React.ElementType;
318
  /** Bootstrap CSS class prefix */
319
  bsPrefix?: string;
320
}
321
```
322

323
**Popover Usage Examples:**
324

325
```typescript
326
import { Popover, OverlayTrigger, Button } from "react-bootstrap";
327

328
const popover = (
329
  <Popover id="popover-basic">
330
    <Popover.Header as="h3">Popover right</Popover.Header>
331
    <Popover.Body>
332
      And here's some <strong>amazing</strong> content. It's very engaging. Right?
333
    </Popover.Body>
334
  </Popover>
335
);
336

337
<OverlayTrigger trigger="click" placement="right" overlay={popover}>
338
  <Button variant="success">Click me to see popover</Button>
339
</OverlayTrigger>
340
```
341

342
### Offcanvas
343

344
Off-canvas component for slide-out panels.
345

346
```typescript { .api }
347
/**
348
 * Offcanvas component for slide-out panels
349
 * @param show - Show/hide state
350
 * @param onHide - Hide handler
351
 * @param placement - Panel placement
352
 * @param backdrop - Backdrop behavior
353
 * @param keyboard - Keyboard close support
354
 * @param scroll - Body scroll behavior
355
 */
356
function Offcanvas(props: OffcanvasProps): JSX.Element;
357

358
interface OffcanvasProps extends React.HTMLAttributes<HTMLDivElement> {
359
  /** Show/hide state */
360
  show?: boolean;
361
  /** Hide handler */
362
  onHide?: () => void;
363
  /** Panel placement */
364
  placement?: "start" | "end" | "top" | "bottom";
365
  /** Backdrop behavior */
366
  backdrop?: boolean | "static";
367
  /** Keyboard close support */
368
  keyboard?: boolean;
369
  /** Body scroll behavior */
370
  scroll?: boolean;
371
  /** Auto focus */
372
  autoFocus?: boolean;
373
  /** Enforce focus */
374
  enforceFocus?: boolean;
375
  /** Restore focus */
376
  restoreFocus?: boolean;
377
  /** Show handler */
378
  onShow?: () => void;
379
  /** Enter handler */
380
  onEnter?: () => void;
381
  /** Entering handler */
382
  onEntering?: () => void;
383
  /** Entered handler */
384
  onEntered?: () => void;
385
  /** Exit handler */
386
  onExit?: () => void;
387
  /** Exiting handler */
388
  onExiting?: () => void;
389
  /** Exited handler */
390
  onExited?: () => void;
391
  /** Bootstrap CSS class prefix */
392
  bsPrefix?: string;
393
}
394
```
395

396
### OffcanvasHeader
397

398
Header component for offcanvas with optional close button.
399

400
```typescript { .api }
401
/**
402
 * OffcanvasHeader component for offcanvas headers
403
 * @param closeButton - Show close button
404
 * @param onHide - Close handler
405
 */
406
function OffcanvasHeader(props: OffcanvasHeaderProps): JSX.Element;
407

408
interface OffcanvasHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
409
  /** Show close button */
410
  closeButton?: boolean;
411
  /** Close handler */
412
  onHide?: () => void;
413
  /** Bootstrap CSS class prefix */
414
  bsPrefix?: string;
415
}
416
```
417

418
### OffcanvasBody
419

420
Body component for offcanvas content.
421

422
```typescript { .api }
423
/**
424
 * OffcanvasBody component for offcanvas bodies
425
 */
426
function OffcanvasBody(props: OffcanvasBodyProps): JSX.Element;
427

428
interface OffcanvasBodyProps extends React.HTMLAttributes<HTMLDivElement> {
429
  /** Bootstrap CSS class prefix */
430
  bsPrefix?: string;
431
}
432
```
433

434
### OffcanvasTitle
435

436
Title component for offcanvas headers.
437

438
```typescript { .api }
439
/**
440
 * OffcanvasTitle component for offcanvas titles
441
 */
442
function OffcanvasTitle(props: OffcanvasTitleProps): JSX.Element;
443

444
interface OffcanvasTitleProps extends React.HTMLAttributes<HTMLElement> {
445
  /** Component used for the root node */
446
  as?: React.ElementType;
447
  /** Bootstrap CSS class prefix */
448
  bsPrefix?: string;
449
}
450
```
451

452
**Offcanvas Usage Examples:**
453

454
```typescript
455
import { Offcanvas, Button } from "react-bootstrap";
456

457
function OffcanvasExample() {
458
  const [show, setShow] = useState(false);
459

460
  const handleClose = () => setShow(false);
461
  const handleShow = () => setShow(true);
462

463
  return (
464
    <>
465
      <Button variant="primary" onClick={handleShow}>
466
        Launch offcanvas
467
      </Button>
468

469
      <Offcanvas show={show} onHide={handleClose}>
470
        <Offcanvas.Header closeButton>
471
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
472
        </Offcanvas.Header>
473
        <Offcanvas.Body>
474
          Some text as placeholder. In real life you can have the elements you
475
          have chosen. Like, text, images, lists, etc.
476
        </Offcanvas.Body>
477
      </Offcanvas>
478
    </>
479
  );
480
}
481

482
// Offcanvas from different sides
483
<Offcanvas show={show} onHide={handleClose} placement="end">
484
  <Offcanvas.Header closeButton>
485
    <Offcanvas.Title>Offcanvas from right</Offcanvas.Title>
486
  </Offcanvas.Header>
487
  <Offcanvas.Body>Content from the right side.</Offcanvas.Body>
488
</Offcanvas>
489
```
490

491
### OverlayTrigger
492

493
Wrapper component for triggering overlays like tooltips and popovers.
494

495
```typescript { .api }
496
/**
497
 * OverlayTrigger component for triggering overlays
498
 * @param trigger - Trigger events
499
 * @param placement - Overlay placement
500
 * @param delay - Show/hide delays
501
 * @param show - Controlled show state
502
 * @param overlay - Overlay component
503
 */
504
function OverlayTrigger(props: OverlayTriggerProps): JSX.Element;
505

506
interface OverlayTriggerProps {
507
  /** Trigger events */
508
  trigger?: "hover" | "click" | "focus" | Array<"hover" | "click" | "focus">;
509
  /** Overlay placement */
510
  placement?: "auto" | "top" | "bottom" | "left" | "right";
511
  /** Show/hide delays */
512
  delay?: number | { show: number; hide: number };
513
  /** Controlled show state */
514
  show?: boolean;
515
  /** Default show state */
516
  defaultShow?: boolean;
517
  /** Show handler */
518
  onToggle?: (show: boolean) => void;
519
  /** Overlay component */
520
  overlay: React.ReactElement;
521
  /** Target element */
522
  target?: React.RefObject<Element>;
523
  /** Container element */
524
  container?: React.ComponentType | Element | (() => Element);
525
  /** Flip behavior */
526
  flip?: boolean;
527
  /** Popover container props */
528
  popperConfig?: any;
529
  /** Root close behavior */
530
  rootClose?: boolean;
531
  /** Root close event */
532
  rootCloseEvent?: "click" | "mousedown";
533
  /** Children element */
534
  children: React.ReactElement;
535
}
536
```
537

538
**OverlayTrigger Usage Examples:**
539

540
```typescript
541
import { OverlayTrigger, Tooltip, Popover, Button } from "react-bootstrap";
542

543
// Tooltip trigger
544
<OverlayTrigger
545
  placement="top"
546
  delay={{ show: 250, hide: 400 }}
547
  overlay={<Tooltip id="button-tooltip">Tooltip text</Tooltip>}
548
>
549
  <Button variant="success">Hover for tooltip</Button>
550
</OverlayTrigger>
551

552
// Popover trigger
553
<OverlayTrigger
554
  trigger="click"
555
  placement="bottom"
556
  overlay={
557
    <Popover id="popover-positioned-bottom">
558
      <Popover.Header>Popover bottom</Popover.Header>
559
      <Popover.Body>
560
        <strong>Holy guacamole!</strong> Check this info.
561
      </Popover.Body>
562
    </Popover>
563
  }
564
>
565
  <Button variant="danger">Click for popover</Button>
566
</OverlayTrigger>
567

568
// Multiple triggers
569
<OverlayTrigger
570
  trigger={['hover', 'focus']}
571
  placement="right"
572
  overlay={<Tooltip id="multi-trigger-tooltip">Multiple triggers</Tooltip>}
573
>
574
  <Button variant="outline-secondary">Hover or focus</Button>
575
</OverlayTrigger>
576
```