Popover component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What triggers a Bootstrap popover by default?

Bootstrap popovers can be triggered by different user actions. By default, which user action triggers a popover to appear?

A Clicking the element

B Hovering over the element

C Focusing the element

D Double-clicking the element

💡 Hint

Think about the most common way users interact with buttons or links to see extra info.

By default, Bootstrap popovers are triggered by a click event on the target element.

Hover and focus can be used but require configuration.

📝 Syntax

intermediate

Which code correctly initializes a popover with a custom title and content?

You want to create a popover on a button with the title 'Info' and content 'More details here'. Which code snippet correctly initializes this popover using Bootstrap's JavaScript API?

Bootsrap

<button id="infoBtn" type="button" class="btn btn-primary">Info</button>

A bootstrap.Popover.init(document.getElementById('infoBtn'), {title: 'Info', content: 'More details here'});

B new bootstrap.Popover('#infoBtn', {header: 'Info', body: 'More details here'});

C new bootstrap.Popover(document.getElementById('infoBtn'), {title: 'Info', content: 'More details here'});

D new Popover(document.getElementById('infoBtn'), {titleText: 'Info', contentText: 'More details here'});

💡 Hint

Check the correct constructor name and option keys for title and content.

The correct way is to use new bootstrap.Popover(element, options) with options title and content.

Option C uses wrong keys and selector type, C uses a non-existent method, and A uses an undefined constructor.

❓ rendering

advanced

What is the visual result of this popover placement code?

Given the following HTML and JavaScript, where will the popover appear relative to the button when clicked?

Bootsrap

<button id="btn" type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover on left">Click me</button>
<script>var popoverTrigger = document.getElementById('btn');
var popover = new bootstrap.Popover(popoverTrigger);</script>

A The popover appears to the left side of the button.

B The popover appears to the right side of the button.

C The popover appears above the button.

D The popover appears below the button.

💡 Hint

Look at the data-bs-placement attribute value.

The data-bs-placement="left" attribute sets the popover to appear on the left side of the button.

❓ accessibility

advanced

Which attribute improves accessibility for Bootstrap popovers?

To make popovers accessible for screen readers, which ARIA attribute should be added to the popover trigger element?

A aria-expanded="true"

B aria-haspopup="true"

C aria-label="popover content"

D aria-live="polite"

💡 Hint

This attribute indicates the element controls a popup.

aria-haspopup="true" tells assistive technologies that the element triggers a popup like a popover.

aria-expanded is used for expandable content but must be toggled dynamically.

❓ selector

expert

Which CSS selector targets only visible Bootstrap popovers?

Bootstrap popovers have the class .popover. You want to write CSS that styles only popovers currently visible on the page. Which selector correctly targets visible popovers?

A .popover:not(.fade) { background-color: yellow; }

B .popover[aria-hidden="false"] { background-color: yellow; }

C .popover:visible { background-color: yellow; }

D .popover.show { background-color: yellow; }

💡 Hint

Bootstrap adds a specific class to show popovers.

Bootstrap adds the show class to popovers when they are visible.

Option D correctly targets visible popovers.

Option D is incorrect because fade is for animation, not visibility.

Option D uses an attribute not set by Bootstrap.

Option D uses a non-existent CSS pseudo-class.