毕竟 Bootstrap 提示工具(Tooltip)插件

浏览:1115 发布日期:2020年01月23日分类:前端开发关键字: Bootstrap 提示工具

<h4>提示工具(Tooltip)插件 - 锚</h4>

这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"

    title="默认的 Tooltip">

  默认的 Tooltip

</a>.

这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"

    data-placement="left" title="左侧的 Tooltip">

  左侧的 Tooltip

</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="top"

    title="顶部的 Tooltip">

  顶部的 Tooltip

</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"

    title="底部的 Tooltip">

  底部的 Tooltip

</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="right"

    title="右侧的 Tooltip">

  右侧的 Tooltip

</a>

 

<br>

 

<h4>提示工具(Tooltip)插件 - 按钮</h4>

<button type="button" class="btn btn-default" data-toggle="tooltip"

    title="默认的 Tooltip">

  默认的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

    data-placement="left" title="左侧的 Tooltip">

  左侧的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

    data-placement="top" title="顶部的 Tooltip">

  顶部的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

    data-placement="bottom" title="底部的 Tooltip">

  底部的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"

    data-placement="right" title="右侧的 Tooltip">

  右侧的 Tooltip

</button>

<script>

  $(function () { $("[data-toggle='tooltip']").tooltip(); });

</script>

来源:https://www.hbsjsd.cn/cates/lst/18.html

最佳答案

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

收藏

赞

李少伟

积分:1477 等级:LV3

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。