Popover component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a popover to the button using Bootstrap.

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="[1]" title="Popover title" data-bs-content="Popover body content">Click me</button>

Drag options to blanks, or click blank then click option'

Apopover

Btooltip

Cmodal

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'tooltip' instead of 'popover' will show a tooltip, not a popover.

Using 'modal' or 'dropdown' will not activate a popover.

The attribute data-bs-toggle="popover" activates the popover on the button.

2fill in blank

medium

Complete the JavaScript code to enable all popovers on the page.

Bootsrap

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.[1](popoverTriggerEl));

Drag options to blanks, or click blank then click option'

AModal

BTooltip

CPopover

DDropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Tooltip' will initialize tooltips, not popovers.

Using 'Modal' or 'Dropdown' will cause errors.

Bootstrap's JavaScript class to create popovers is Popover.

3fill in blank

hard

Fix the error in the popover initialization code by filling the blank.

Bootsrap

var popoverTrigger = document.getElementById('popoverBtn');
var popover = new bootstrap.Popover([1]);

Drag options to blanks, or click blank then click option'

ApopoverBtn

BpopoverTrigger

Cdocument.getElementById('popoverBtn')

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string or calling getElementById again causes errors.

Using 'this' outside an event handler is incorrect.

The popover constructor needs the element reference, which is stored in popoverTrigger.

4fill in blank

hard

Fill both blanks to create a popover with a custom trigger and placement.

Bootsrap

var popover = new bootstrap.Popover(document.getElementById('btn'), {
  trigger: '[1]',
  placement: '[2]'
});

Drag options to blanks, or click blank then click option'

Afocus

Bhover

Ctop

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid trigger values causes the popover not to show.

Placement values must be one of the allowed directions.

The trigger option can be set to focus to show popover on focus, and placement controls where the popover appears, e.g., top.

5fill in blank

hard

Fill all three blanks to create a popover with a title, content, and HTML enabled.

Bootsrap

var popover = new bootstrap.Popover(document.getElementById('infoBtn'), {
  title: '[1]',
  content: '[2]',
  html: [3]
});

Drag options to blanks, or click blank then click option'

AInfo

B<strong>Bold content</strong>

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting html to false will show HTML tags as text.

Using plain text content when HTML is needed.

Set title to 'Info', content to HTML string, and html to true to allow HTML content in the popover.