The prompt box is a small pop-up window that appears when the mouse moves over the element and disappears when the mouse moves outside the element. By adding to elements Note: the prompt box should be written in the initialization code of JavaScript: then call on the specified element The following examples can use prompt boxes anywhere in the document: By default, the prompt box is displayed above the element. You can use the ‘data bs placement’ attribute to set the direction of the prompt box display: 7.25.1. How to create a prompt box ¶
data-bs-toggle="tooltip"
let’s create a prompt box.
title
property is what is displayed in the prompt box:<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="I am the prompt content!">Move the mouse over to me</button>
tooltip()
method.Example ¶
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
7.25.2. Specify the location of the prompt box ¶
top
,
bottom
,
left
or
right
:Example ¶
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="I am the prompt content!">Move the mouse over to me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I am the prompt content!">Move the mouse over to me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="I am the prompt content!">Move the mouse over to me</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="I am the prompt content!">Move the mouse over to me</a>