Tooltip component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Bootsrap

<button type="button" class="btn btn-secondary" data-bs-toggle="[1]" title="Tooltip text">Hover me</button>

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

Adropdown

Bpopover

Cmodal

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'popover' instead of 'tooltip' for the toggle attribute.

Forgetting to add the title attribute for tooltip text.

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

2fill in blank

medium

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

Bootsrap

const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipList = tooltipTriggerList.map(function ([1]) {
  return new bootstrap.Tooltip([1]);
});

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

Abtn

Btooltip

Celement

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not used consistently inside the function.

Using a variable name that conflicts with Bootstrap objects.

The variable element represents each DOM element with the tooltip attribute.

3fill in blank

hard

Fix the error in the tooltip initialization code by completing the missing option.

Bootsrap

var tooltipTrigger = document.getElementById('myTooltip');
var tooltip = new bootstrap.Tooltip(tooltipTrigger, { placement: '[1]' });

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

Ainside

Btop

Cmiddle

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid placement values like 'center' or 'middle'.

Omitting the placement option entirely.

The placement option accepts values like top, bottom, left, or right. top places the tooltip above the element.

4fill in blank

hard

Fill both blanks to create a button with a tooltip that appears on the right side and has the text 'Info'.

Bootsrap

<button type="button" class="btn btn-info" data-bs-toggle="[1]" data-bs-placement="[2]" title="Info">Hover me</button>

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

Atooltip

Bpopover

Cleft

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'popover' instead of 'tooltip' for the toggle attribute.

Setting placement to 'left' instead of 'right'.

The button uses data-bs-toggle="tooltip" to activate the tooltip and data-bs-placement="right" to position it on the right side.

5fill in blank

hard

Fill all three blanks to create a tooltip that triggers on focus, has a delay of 500ms, and uses the dark theme.

Bootsrap

var tooltipTrigger = document.getElementById('focusTooltip');
var tooltip = new bootstrap.Tooltip(tooltipTrigger, {
  trigger: '[1]',
  delay: [2],
  customClass: '[3]'
});

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

Ahover

Bfocus

Cdark

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'focus' for the trigger.

Setting delay as a string instead of a number.

Using 'light' instead of 'dark' for the theme.

The tooltip triggers on focus, has a delay of 500 milliseconds, and uses the dark theme via customClass.