Question

我有以下示例工作正常。但是，我希望自定义工具提示显示在单击而不是悬停。

HTML：

<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip functionality</title>
  <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
div.wrapper{margin:200px;}

 .ui-tooltip, .arrow:after {
   background: #dd5600;
   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);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 .arrow.top:after {
   bottom: -20px;
   top: auto;
 }
 </style>

  <!-- Javascript -->
  <script>
  $(document).ready(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>
</head>
<body>

<div class="wrapper">
  <input id="age" title="We ask for your age only for statistical purposes."></p>
</div>

</body>
</html>

结果：

参考：

https://jqueryui.com/tooltip/#custom-style
Jquery-ui tooltip on click

注意：

我试过Jquery-ui tooltip on click，但无法解决我的问题。

Answer 1

使用此

$('#tt').on({
  "click": function() {
    $(this).tooltip({ items: "#tt", content: "We ask your age only for statistical purposes."});
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" id="tt">

jQuery UI工具提示触发'Click'而不是悬停

1 个答案: