jQuery UI
  • [jQuery UI]jQuery UI 教程
  • [jQuery UI]jQuery UI 简介
  • [jQuery UI]jQuery UI 下载
  • [jQuery UI]jQuery UI 使用
  • [jQuery UI]jQuery UI 定制
  • [jQuery UI]jQuery UI 工作原理
  • [jQuery UI]jQuery UI 主题
  • [jQuery UI]jQuery UI ThemeRoller
  • [jQuery UI]jQuery UI CSS 框架 API
  • [jQuery UI]jQuery UI 设计主题
  • [jQuery UI]jQuery UI 部件库(Widget Factory)
  • [jQuery UI]jQuery UI 通过部件库(Widget Factory)扩展小部件
  • [jQuery UI]jQuery UI 小部件(Widget)方法调用
  • [jQuery UI]jQuery UI 为什么使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 如何使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 1.10 API 文档
  • [jQuery UI]jQuery UI API 类别 - 特效(Effects)
  • [jQuery UI]jQuery UI API类别 - 特效核心Effects Core
  • [jQuery UI]jQuery UI API 类别 - 交互Interactions
  • [jQuery UI]jQuery UI API 类别 - 方法重载Method Overrides
  • [jQuery UI]jQuery UI API 类别 - 方法Methods
  • [jQuery UI]jQuery UI API 类别 - 选择器Selectors
  • [jQuery UI]jQuery UI API 类别 - 主题Theming
  • [jQuery UI]jQuery UI API 类别 - UI 核心UI Core
  • [jQuery UI]jQuery UI API 类别 - 实用工具Utilities
  • [jQuery UI]jQuery UI API 类别 - 小部件Widgets
  • [jQuery UI]jQuery UI 实例
  • [jQuery UI]jQuery UI 实例 - 拖动Draggable
  • [jQuery UI]jQuery UI 实例 - 放置Droppable
  • [jQuery UI]jQuery UI 实例 - 缩放Resizable
  • [jQuery UI]jQuery UI 实例 - 选择Selectable
  • [jQuery UI]jQuery UI 实例 - 排序Sortable
  • [jQuery UI]jQuery UI 实例 - 折叠面板Accordion
  • [jQuery UI]jQuery UI 实例 - 自动完成Autocomplete
  • [jQuery UI]jQuery UI 实例 - 按钮Button
  • [jQuery UI]jQuery UI 实例 - 日期选择器Datepicker
  • [jQuery UI]jQuery UI 实例 - 对话框Dialog
  • [jQuery UI]jQuery UI 实例 - 菜单Menu
  • [jQuery UI]jQuery UI 实例 - 进度条Progressbar
  • [jQuery UI]jQuery UI 实例 - 滑块Slider
  • [jQuery UI]jQuery UI 实例 - 旋转器Spinner
  • [jQuery UI]jQuery UI 实例 - 标签页Tabs
  • [jQuery UI]jQuery UI 实例 - 工具提示框Tooltip
  • [jQuery UI]jQuery UI 实例 - 特效Effect
  • [jQuery UI]jQuery UI 实例 - 显示Show
  • [jQuery UI]jQuery UI 实例 - 隐藏Hide
  • [jQuery UI]jQuery UI 实例 - 切换Toggle
  • [jQuery UI]jQuery UI 实例 - 添加Class-Add Class
  • [jQuery UI]jQuery UI 实例 - 移除 Class-Remove Class
  • [jQuery UI]jQuery UI 实例 - 切换Class-Toggle Class
  • [jQuery UI]jQuery UI 实例 - 转换Class-Switch Class
  • [jQuery UI]jQuery UI 实例 - 颜色动画Color Animation
  • [jQuery UI]jQuery UI 实例 - 定位Position
  • [jQuery UI]jQuery UI 实例 - 部件库Widget Factory
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> javaScript >> jQuery UI >> jQuery UI 实例 - 工具提示框Tooltip
    jQuery UI 实例 - 工具提示框(Tooltip)
    更新日期: 2017年07月21日 来源: 本站原创 作者: 佚名 阅读:
    上一篇jQuery UI 实例 - 标签页Tabs 下一篇:jQuery UI 实例 - 特效Effect

    jQuery UI 实例 - 工具提示框(Tooltip)

    可自定义的、可主题化的工具提示框,替代原生的工具提示框。

    如需了解更多有关 tooltip 部件的细节,请查看 API 文档 工具提示框部件(Tooltip Widget)。

    默认功能

    悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jquery ui 工具提示框(Tooltip) - 默认功能</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( document ).tooltip();
      });
      </script>
      <style>
      label {
        display: inline-block;
        width: 5em;
      }
      </style>
    </head>
    <body>
     
    <p><a href="#" title="部件的名称">Tooltips</a> 
    可被绑定到任意的元素上。
    生的工具提示框,所以它可以被定义样式。通过 
    <a href="http://themeroller.com" 
    title="ThemeRoller:jQuery UI 的主题创建应用程序">ThemeRoller</a> 
    创建的主题也可以相应地定义工具提示框的样式。</p>
    <p>工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。</p>
    <p><label for="age">您的年龄:</label><input id="age" title="年龄仅用于统计。"></p>
    <p>悬停在相应的区域上查看工具提示框。</p>
     
     
    </body>
    </html>

    查看演示

    自定义样式

    悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 工具提示框(Tooltip) - 自定义样式</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( document ).tooltip({
          position: {
            my: "center bottom-20",
            at: "center top",
            using: function( position, feedback ) {
              $( this ).css( position );
              $( "<div>" )
                .addClass( "arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
            }
          }
        });
      });
      </script>
      <style>
      .ui-tooltip, .arrow:after {
        background: black;
        border: 2px solid white;
      }
      .ui-tooltip {
        padding: 10px 20px;
        color: white;
        border-radius: 20px;
        font: bold 14px "Helvetica Neue", Sans-Serif;
        text-transform: uppercase;
        box-shadow: 0 0 7px black;
      }
      .arrow {
        width: 70px;
        height: 16px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -35px;
        bottom: -16px;
      }
      .arrow.top {
        top: -16px;
        bottom: auto;
      }
      .arrow.left {
        left: 20%;
      }
      .arrow:after {
        content: "";
        position: absolute;
        left: 20px;
        top: -20px;
        width: 25px;
        height: 25px;
        box-shadow: 6px 5px 9px -9px black;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        tranform: rotate(45deg);
      }
      .arrow.top:after {
        bottom: -20px;
        top: auto;
      }
      </style>
    </head>
    <body>
     
    <p><a href="#" title="部件的名称">Tooltips</a> 
    可被绑定到任意的元素上。当您的鼠标悬停在元素上时,
    title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。</p>
    <p>但是由于它不是一个原生的工具提示框,所以它可以被定义样式。
    通过 <a href="http://themeroller.com" 
    title="ThemeRoller:jQuery UI 的主题创建应用程序">ThemeRoller</a> 
    创建的主题也可以相应地定义工具提示框的样式。</p>
    <p>工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。</p>
    <p><label for="age">您的年龄:</label><input id="age" title="年龄仅用于统计。"></p>
    <p>悬停在相应的区域上查看工具提示框。</p>
     
     
    </body>
    </html>

    查看演示

    自定义动画

    本实例演示了如何使用 show 和 hide 选项来自定义动画,也可以使用 open 事件来自定义动画。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 工具提示框(Tooltip) - 自定义动画</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#show-option" ).tooltip({
          show: {
            effect: "slideDown",
            delay: 250
          }
        });
        $( "#hide-option" ).tooltip({
          hide: {
            effect: "explode",
            delay: 250
          }
        });
        $( "#open-event" ).tooltip({
          show: null,
          position: {
            my: "left top",
            at: "left bottom"
          },
          open: function( event, ui ) {
            ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
          }
        });
      });
      </script>
    </head>
    <body>
     
    <p>这里有多种方式自定义工具提示框的动画。</p>
    <p>您可以使用 <a id="show-option" 
    href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示">show</a><a id="hide-option" 
    href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏">hide</a> 选项。</p>
    <p>您也可以使用 <a id="open-event" 
    href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示">open</a> 事件。</p>
     
     
    </body>
    </html>

    查看演示

    自定义内容

    演示如何通过自定义 items 和 content 选项,来组合不同的事件委托工具提示框到一个单一的实例中。

    您可能需要与地图工具提示框进行交互,这是未来版本中的一个待实现的功能。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 工具提示框(Tooltip) - 自定义内容</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" 
    href="http://jqueryui.com/resources/demos/style.css">
      <style>
      .photo {
        width: 300px;
        text-align: center;
      }
      .photo .ui-widget-header {
        margin: 1em 0;
      }
      .map {
        width: 350px;
        height: 350px;
      }
      .ui-tooltip {
        max-width: 350px;
      }
      </style>
      <script>
      $(function() {
        $( document ).tooltip({
          items: "img, [data-geo], [title]",
          content: function() {
            var element = $( this );
            if ( element.is( "[data-geo]" ) ) {
              var text = element.text();
              return "<img class='map' alt='" + text +
    
                "' src='http://maps.google.com/maps/api/staticmap?" +
    
                "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
    
                text + "'>";
            }
            if ( element.is( "[title]" ) ) {
              return element.attr( "title" );
            }
            if ( element.is( "img" ) ) {
              return element.attr( "alt" );
            }
          }
        });
      });
      </script>
    </head>
    <body>
     
    <div class="ui-widget photo">
      <div class="ui-widget-header ui-corner-all">
        <h2>蒂芬大教堂(St. Stephen's Cathedral)</h2>
        <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" 
    data-geo="">奥地利维也纳(Vienna, Austria)</a></h3>
      </div>
      <a href="/UploadFiles/2017-07/2/20177210377877769.JPG">
    
        <img src="/wp-content/uploads/2014/03/st-stephens.jpg"
     alt="蒂芬大教堂(St. Stephen&apos;s Cathedral)" class="ui-corner-all">
      </a>
    </div>
     
    <div class="ui-widget photo">
      <div class="ui-widget-header ui-corner-all">
        <h2>塔桥(Tower Bridge)</h2>
        <h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo="">
    英国伦敦(London, England)</a></h3>
      </div>
      <a href="/UploadFiles/2017-07/2/20177218406733464.jpg">
        <img src="/wp-content/uploads/2014/03/tower-bridge.jpg" 
    alt="塔桥(Tower Bridge)" class="ui-corner-all">
      </a>
    </div>
     
    <p>所有的图片源自 <a href="http://commons.wikimedia.org/wiki/Main_Page">
    
    Wikimedia Commons</a>,且归 
    <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" 
    title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版权持有人所有。</p>
     
     
    </body>
    </html>

    查看演示

    表单

    使用下面的按钮来显示帮助文本,或者只需要让鼠标悬停在输入框上或者让输入框获得焦点,
    即可显示相应输入框的帮助文本。

    在 CSS 中定义一个固定的宽度,让同时显示所有的帮助文本时看起来更一致。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 工具提示框(Tooltip) - 表单</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      label {
        display: inline-block; width: 5em;
      }
      fieldset div {
        margin-bottom: 2em;
      }
      fieldset .help {
        display: inline-block;
      }
      .ui-tooltip {
        width: 210px;
      }
      </style>
      <script>
      $(function() {
        var tooltips = $( "[title]" ).tooltip();
        $( "<button>" )
          .text( "Show help" )
          .button()
          .click(function() {
            tooltips.tooltip( "open" );
          })
          .insertAfter( "form" );
      });
      </script>
    </head>
    <body>
     
    <form>
      <fieldset>
        <div>
          <label for="firstname">名字</label>
          <input id="firstname" name="firstname" title="请提供您的名字。">
        </div>
        <div>
          <label for="lastname">姓氏</label>
          <input id="lastname" name="lastname" title="请提供您的姓氏。">
        </div>
        <div>
          <label for="address">地址</label>
          <input id="address" name="address" title="您的家庭或工作地址。">
        </div>
      </fieldset>
    </form>
     
     
    </body>
    </html>

    查看演示

    跟踪鼠标

    本实例中的工具提示框是相对于鼠标进行定位的,当鼠标在元素上移动时,它会跟随鼠标移动。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 工具提示框(Tooltip) - 跟踪鼠标</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      label {
        display: inline-block;
        width: 5em;
      }
      </style>
      <script>
      $(function() {
        $( document ).tooltip({
          track: true
        });
      });
      </script>
    </head>
    <body>
    
    <p><a href="#" title="部件的名称">Tooltips</a> 
    可被绑定到任意的元素上。
    当您的鼠标悬停在元素上时,title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。</p>
    <p>但是由于它不是一个原生的工具提示框,所以它可以被定义样式。通过 
    <a href="http://themeroller.com" 
    title="ThemeRoller:jQuery UI 的主题创建应用程序">ThemeRoller</a>
     创建的主题也可以相应地定义工具提示框的样式。</p>
    <p>工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。</p>
    <p><label for="age">您的年龄:</label><input id="age" title="年龄仅用于统计。"></p>
    <p>悬停在相应的区域上查看工具提示框。</p>
     
     
    </body>
    </html>

    查看演示

    视频播放器

    一个虚拟的视频播放器,带有喜欢/分享/统计按钮,每个按钮都带有自定义样式的工具提示框。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 工具提示框(Tooltip) - 视频播放器</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      .player {
        width: 500px;
        height: 300px;
        border: 2px groove gray;
        background: rgb(200, 200, 200);
        text-align: center;
        line-height: 300px;
      }
      .ui-tooltip {
        border: 1px solid white;
        background: rgba(20, 20, 20, 1);
        color: white;
      }
      .set {
        display: inline-block;
      }
      .notification {
        position: absolute;
        display: inline-block;
        font-size: 2em;
        padding: .5em;
        box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
      }
      </style>
      <script>
      $(function() {
        function notify( input ) {
          var msg = "已选择 " + $.trim( input.data( "tooltip-title" ) || input.text() );
          $( "<div>" )
            .appendTo( document.body )
            .text( msg )
            .addClass( "notification ui-state-default ui-corner-bottom" )
            .position({
              my: "center top",
              at: "center top",
              of: window
            })
            .show({
              effect: "blind"
            })
            .delay( 1000 )
            .hide({
              effect: "blind",
              duration: "slow"
            }, function() {
              $( this ).remove();
            });
        }
     
        $( "button" ).each(function() {
          var button = $( this ).button({
            icons: {
              primary: $( this ).data( "icon" )
            },
            text: !!$( this ).attr( "title" )
          });
          button.click(function() {
            notify( button );
          });
        });
        $( ".set" ).buttonset({
          items: "button"
        });
     
        $( document ).tooltip({
          position: {
            my: "center top",
            at: "center bottom+5",
          },
          show: {
            duration: "fast"
          },
          hide: {
            effect: "hide"
          }
        });
      });
      </script>
    </head>
    <body>
     
    <div class="player">这里是视频 (html5?)</div>
    <div class="tools">
      <span class="set">
        <button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频">喜欢</button>
        <button data-icon="ui-icon-circle-arrow-s">我不喜欢这个视频</button>
      </span>
      <div class="set">
        <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button>
        <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夹</button>
      </div>
      <button title="分享这个视频">分享</button>
      <button data-icon="ui-icon-alert">标记为不恰当</button>
    </div>
     
     
    </body>
    </html>

    查看演示

     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇jQuery UI 实例 - 标签页Tabs 下一篇:jQuery UI 实例 - 特效Effect
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918