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.

Practice

1. What is the main purpose of a Bootstrap tooltip component?

easy

A. To show extra information when hovering or focusing on an element

B. To create a clickable button

C. To display a full page modal

D. To change the background color of an element

Solution

1. Step 1: Understand tooltip functionality

   Tooltips provide extra info on hover or focus without cluttering the page.

2. Step 2: Compare options with tooltip purpose

   Only To show extra information when hovering or focusing on an element describes showing extra info on hover/focus, which matches tooltip behavior.

3. Final Answer:

   To show extra information when hovering or focusing on an element -> Option A

4. Quick Check:

   Tooltip = extra info on hover/focus [OK]

Hint: Tooltips show hints on hover or focus [OK]

Common Mistakes:

• Confusing tooltips with modals or buttons
• Thinking tooltips change element styles permanently
• Assuming tooltips require clicks

2. Which attribute is required on an element to enable a Bootstrap tooltip?

easy

A. data-bs-toggle="tooltip"

B. data-toggle="modal"

C. aria-label="tooltip"

D. data-bs-target="#tooltip"

Solution

1. Step 1: Identify correct attribute for tooltip

   Bootstrap tooltips require data-bs-toggle="tooltip" on the element.

2. Step 2: Eliminate other attributes

   Other options relate to modals, accessibility labels, or targets, not tooltips.

3. Final Answer:

   data-bs-toggle="tooltip" -> Option A

4. Quick Check:

   Tooltip attribute = data-bs-toggle="tooltip" [OK]

Hint: Look for data-bs-toggle="tooltip" to enable tooltips [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle
• Confusing tooltip with modal attributes
• Missing the required attribute entirely

3. What will happen when the following code runs in a Bootstrap-enabled page?

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Save changes">Save</button>
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
</script>

medium

A. Nothing happens because tooltips need clicks

B. The button text changes to 'Save changes' immediately

C. An error occurs because the script is incorrect

D. Hovering over the button shows a tooltip with text 'Save changes'

Solution

1. Step 1: Understand the HTML and JS code

   The button has data-bs-toggle="tooltip" and a title attribute. The script initializes Bootstrap tooltips on all such elements.

2. Step 2: Predict the user interaction

   When hovering or focusing on the button, the tooltip with text 'Save changes' will appear.

3. Final Answer:

   Hovering over the button shows a tooltip with text 'Save changes' -> Option D

4. Quick Check:

   Tooltip shows on hover with title text [OK]

Hint: Tooltip text comes from title attribute, shows on hover [OK]

Common Mistakes:

• Thinking tooltip shows on click only
• Expecting button text to change
• Assuming script causes error

4. Identify the error in this Bootstrap tooltip setup:

<button type="button" class="btn btn-primary" data-toggle="tooltip" title="Click me">Click</button>
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (el) {
    return new bootstrap.Tooltip(el);
  });
</script>

medium

A. The title attribute is missing

B. The script uses the wrong selector for tooltips

C. The button uses data-toggle instead of data-bs-toggle

D. Bootstrap tooltips do not require JavaScript initialization

Solution

1. Step 1: Check the button attribute

   The button uses data-toggle="tooltip" but Bootstrap 5 requires data-bs-toggle="tooltip".

2. Step 2: Confirm script selector matches attribute

   The script selects elements with data-bs-toggle="tooltip", so it finds none because the button uses the old attribute.

3. Final Answer:

   The button uses data-toggle instead of data-bs-toggle -> Option C

4. Quick Check:

   Bootstrap 5 uses data-bs-toggle, not data-toggle [OK]

Hint: Match data-bs-toggle attribute with JS selector [OK]

Common Mistakes:

• Using old Bootstrap 4 attribute data-toggle
• Assuming title attribute is optional
• Thinking JS initialization is unnecessary

5. You want to add a tooltip to a link that is accessible and works on keyboard focus. Which is the best way to implement it using Bootstrap?

hard

A. Add aria-label only without JavaScript

B. Add data-bs-toggle="tooltip" and title attributes, then initialize tooltips with JavaScript

C. Use data-bs-toggle="popover" instead of tooltip

D. Add a span with tooltip text visible always

Solution

1. Step 1: Understand accessibility and Bootstrap tooltip setup

   Bootstrap tooltips require data-bs-toggle="tooltip" and a title attribute for text. They show on hover and keyboard focus.

2. Step 2: Evaluate other options for accessibility and functionality

   Add aria-label only without JavaScript lacks tooltip behavior, C uses popover (different), D shows text always (not tooltip).

3. Final Answer:

   Add data-bs-toggle="tooltip" and title attributes, then initialize tooltips with JavaScript -> Option B

4. Quick Check:

   Tooltip needs data-bs-toggle, title, and JS init for accessibility [OK]

Hint: Use data-bs-toggle and title with JS for accessible tooltips [OK]

Common Mistakes:

• Skipping JavaScript initialization
• Confusing popovers with tooltips
• Making tooltip text always visible