📜  解释引导工具提示

📅  最后修改于: 2022-05-13 01:56:45.567000             🧑  作者: Mango

解释引导工具提示

在 Bootstrap 框架中,Tooltip 是一个插件,当用户将鼠标指针悬停在元素上时,它会显示一个小弹出框。例如,当用户指向链接或按钮等时,一个带有提示或有关元素信息的小弹出窗口正在悬停。这个Tooltip Plugin一般用在我们想在网页上显示每个组件的用途时,只需将鼠标指针移到组件上即可。

要实现工具提示,我们需要为元素添加data-toggle=”tooltip”属性,并且 title 属性用于在悬停时显示文本。我们必须通过在 JavaScript 代码中指定目标元素的 id、class 或任何 CSS 选择器的tooltip()方法,通过 JavaScript 初始化 Tooltip 以触发 Tooltips。在本文中,我们将了解 Bootstrap 中的工具提示及其配置和实现。请参考 Bootstrap 4 |工具提示文章了解更多详情。

设置引导工具提示插件的步骤:

标签中包含 Bootstrap 和 jQuery CDN

在 HTML 元素中添加工具提示标记 –

将 jQuery 添加到

定位工具提示(可选)–

默认情况下,引导工具提示插件将始终出现在元素的顶部。但是我们可以使用 data-placement 属性来改变工具提示插件的位置,以便我们可以将工具提示定位在元素的顶部、底部、左侧或右侧。

我们还可以通过 JavaScript 定位 Tooltips:

在这个阶段,我们已经成功地配置了工具提示来开始工作。

例子:

HTML


  

    Bootstrap Tooltip Example
    
    
    

  

    
        

            GeeksforGeeks         

                   
Bootstrap Tooltip Example
        
                                Hover me              
          


输出: