Bootstrap 提醒专用工具

摘要:当您要想叙述一个连接的情况下,提醒专用工具(Tooltip)就看起来十分有效。提醒专用工具(Tooltip)软件是受 Jason Frame 写的 jQuery.tipsy 的启迪。提醒专用工具(Tooltip)软件干了许多改...

当您要想叙述一个连接的情况下,提醒专用工具(Tooltip)就看起来十分有效。提醒专用工具(Tooltip)软件是受 Jason Frame 写的 jQuery.tipsy 的启迪。提醒专用工具(Tooltip)软件干了许多改善,比如不用依靠图象,只是改成 CSS 完成动漫实际效果,用 data 特性储存题目信息内容。

假如您要想独立引入该软件的作用,那麼您必须引入 tooltip.js。或是,如同 Bootstrap 软件概览 一章中常提及,您能够引入 bootstrap.js 或缩小版的 bootstrap.min.js。

提醒专用工具(Tooltip)软件依据要求转化成內容和标识,默认设置状况下是把提醒专用工具(tooltip)放到他们的开启原素后边。您能够有下列二种方法加上提醒专用工具(tooltip):

根据 data 特性:如需加上一个提醒专用工具(tooltip),只应向一个锚标识加上 data_toggle="tooltip" 就可以。锚的 title 即是提醒专用工具(tooltip)的文字。默认设置状况下,软件把提醒专用工具(tooltip)设定在顶端。
 a href="#" data_toggle="tooltip" title="Example tooltip" 请悬停在我的上边 /a 
根据 JavaScript:根据 JavaScript 开启提醒专用工具(tooltip):
$('#identifier').tooltip(options)

提醒专用工具(Tooltip)软件不象以前所探讨的往下拉莱单以及他软件那般,它并不是纯 CSS 软件。如需应用该软件,您务必应用 jquery 激话它(载入 javascript)。应用下边的脚本制作来开启网页页面中的全部的提醒专用工具(tooltip):
$(function () { $("[data_toggle='tooltip']").tooltip(); });

下边的案例演试了根据 data 特性应用提醒专用工具(Tooltip)软件的使用方法。

h4 提醒专用工具(Tooltip)软件 _ 锚 /h4 它是一个 a href= # 'tooltip'] ).tooltip(); }); /script 试着一下 »

結果以下所显示:

提示工具(Tooltip)插件

有一些选择项是根据 Bootstrap 数据信息 API(Bootstrap Data API)加上或根据 JavaScript 启用的。下表列举了这种选择项:

选择项名字种类/默认设置值Data 特性名字叙述 animationboolean
默认设置值:truedata_animation提醒专用工具应用 CSS 渐变色ps滤镜实际效果。 htmlboolean
默认设置值:falsedata_html向提醒专用工具插进 HTML。假如为 false,jQuery 的 text 方式将被用以向 dom 插进內容。假如您担忧 XSS 进攻,请应用 text。 placementstring|function
默认设置值:topdata_placement要求怎样精准定位提醒专用工具(即 top|bottom|left|right|auto)。
当特定为 auto 时,会动态性调节提醒专用工具。比如,假如 placement 是 "auto left",提醒专用工具可能尽量显示信息在左侧,在状况不容许的状况下它才会显示信息在右侧。 selectorstring
默认设置值:falsedata_selector假如出示了一个挑选器,提醒专用工具目标将被委任到特定的总体目标。 titlestring | function
默认设置值:''data_title假如未特定 title 特性,则 title 选择项是默认设置的 title 值。 triggerstring
默认设置值:'hover focus'data_trigger界定怎样开启提醒专用工具: click| hover | focus | manual。您能够传送好几个开启器,每一个开启器中间用空格符隔开。 delaynumber | object
默认设置值:0data_delay延迟时间显示信息和掩藏提醒专用工具的毫秒数 _ 对 manual 手动式开启种类不适感用。假如出示的是一数量字,那麼延迟时间可能运用于显示信息和掩藏。假如出示的是目标,构造以下所显示:
delay:
{ show: 500, hide: 100 }
containerstring | false
默认设置值:falsedata_container向特定原素追加提醒专用工具。
案例: container: 'body'
$(function () { $('.tooltip_show').tooltip('show');}); $(function () { $('.tooltip_hide').tooltip('hide');}); $(function () { $('.tooltip_destroy').tooltip('destroy');}); $(function () { $('.tooltip_toggle').tooltip('toggle');}); $(function () { $( .tooltip_options a ).tooltip({html : true }); /script /div 试着一下 »

結果以下所显示:

提示工具(Tooltip)插件方法

下表列举了提醒专用工具(Tooltip)软件时要采用的恶性事件。这种恶性事件可在涵数中当勾子应用。

恶性事件叙述案例 show.bs.tooltip当启用 show 案例方式时马上开启该恶性事件。
$('#myTooltip').on('show.bs.tooltip', function () {
 // 实行一些姿势...
shown.bs.tooltip当提醒专用工具对客户由此可见时开启该恶性事件(将等候 CSS 衔接实际效果进行)。
$('#myTooltip').on('shown.bs.tooltip', function () {
 // 实行一些姿势...
hide.bs.tooltip当启用 hide 案例方式时马上开启该恶性事件。
$('#myTooltip').on('hide.bs.tooltip', function () {
 // 实行一些姿势...
hidden.bs.tooltip当提醒专用工具对客户掩藏时开启该恶性事件(将等候 CSS 衔接实际效果进行)。
$('#myTooltip').on('hidden.bs.tooltip', function () {
 // 实行一些姿势...

下边的案例演试了提醒专用工具(Tooltip)软件恶性事件的使用方法。

h4 提醒专用工具(Tooltip)软件 _ 锚 /h4 它是一个 a href= # '.tooltip_show').tooltip('show');}); $(function () { $('.tooltip_show').on('show.bs.tooltip', function () { alert( Alert message on show ); }); /script 试着一下 »

結果以下所显示:

提示工具(Tooltip)插件事件


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503