툴팁

기본 툴팁 상자를 대체하는 사용자 정의 및 테마 지정이 가능한 툴팁 상자입니다.

툴팁 위젯에 대한 자세한 내용은 API 문서 툴팁 위젯을 참조하세요.

기본 기능

링크 위로 마우스를 가져가거나 탭 키를 사용하여 각 요소를 살펴보고 집중하세요.

Instance

<!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> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

사용자 정의 스타일

링크 위로 마우스를 가져가거나 탭 키를 사용하여 순환하세요. 모든 요소에 중점을 두고 있습니다.

Instance

<!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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

사용자 정의 애니메이션

이 예에서는 표시 및 숨기기 옵션을 사용하여 다음을 수행하는 방법을 보여줍니다. 애니메이션을 사용자 정의하고, open 이벤트를 사용하여 애니메이션을 사용자 정의할 수도 있습니다.

Instance

<!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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

사용자 지정 콘텐츠

항목 및 콘텐츠 옵션을 사용자 지정하여 다양한 항목을 결합하는 방법을 보여줍니다. 이벤트는 도구 설명을 단일 인스턴스에 위임합니다.

지도 툴팁과 상호 작용해야 할 수도 있습니다. 이는 향후 버전에서 보류 중인 기능입니다.

Instance

<!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¢er=" +
            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&z=11" data-geo="">奥地利维也纳（Vienna, Austria）</a></h3>
  </div>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <img src="/wp-content/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen'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&z=11" data-geo="">英国伦敦（London, England）</a></h3>
  </div>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

Form

아래 버튼을 사용하여 도움말 텍스트를 표시하거나 그냥 나가세요. 입력 상자 위에 마우스를 올리거나 입력 상자에 초점을 맞추면 해당 입력 상자의 도움말 텍스트가 표시됩니다.

모든 도움말 텍스트가 동시에 표시될 때 더욱 일관되게 보이도록 CSS에서 고정 너비를 정의하세요.

Instance

<!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>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

마우스 추적

이 예제의 도구 설명 상자는 마우스를 기준으로 위치가 지정되며 마우스가 요소 위로 이동할 때 마우스 움직임을 따릅니다.

Instance

<!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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

비디오 플레이어

좋아요/공유/통계 버튼이 있는 가상 비디오 플레이어, 각각에는 사용자 정의 스타일의 툴팁 상자가 있습니다.

Instance

<!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>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

툴팁

기본 기능

Instance

사용자 정의 스타일

Instance

사용자 정의 애니메이션

Instance

사용자 지정 콘텐츠

Instance

Form

Instance

마우스 추적

Instance

비디오 플레이어

Instance

PHP 중국어 웹사이트