How to set the bootstrap prompt box

Bootstrap provides an information prompt box for elements. The settings are as follows: add data-toggle attributes and prompt text; load the Bootstrap JavaScript library; and initialize the prompt box plug-in.

Setting up Bootstrap prompt box

Bootstrap provides a prompt box component to display information when a user hovers or clicks an element. To set up a prompt box, you need to perform the following steps:

1. Add HTML tags

Add data-toggle="tooltip" attribute and prompt text to the element you want to display the prompt box.

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本">按钮</button></code>

2. Load the Bootstrap JavaScript library

Include the Bootstrap JavaScript library in your page.

 <code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script></code>

3. Initialization prompt box

Use Tooltip class to initialize the prompt box.

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

Customize the appearance of the prompt box

You can change the appearance of the prompt box by customizing CSS. For example, you can change the color of the prompt box:

 <code class="css">.tooltip-inner { background-color: #000; }</code>

Configure prompt box options

You can configure prompt box options by modifying data properties. For example, you can change the placement of the prompt box:

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top">按钮</button></code>

Available options include:

• placement : placement of prompt boxes (such as top , right , bottom , left )
• trigger : Events that trigger the prompt box (such as hover , focus , click )
• delay : The delay in the prompt box showing and hidden in milliseconds
• html : Allow the prompt box to contain HTML content

Example

The following code shows a fully customized prompt box:

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top" data-trigger="click" data-delay="500" data-html="true">按钮</button></code>

 <code class="css">.tooltip-inner { background-color: #000; color: #fff; }</code>

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

The above is the detailed content of How to set the bootstrap prompt box. For more information, please follow other related articles on the PHP Chinese website!