jQuery UI工具提示點擊'點擊'而不是懸停

我有以下的例子，它工作正常。但是，我想要在上點擊而不是在懸停上顯示自定義工具提示。jQuery UI工具提示點擊'點擊'而不是懸停

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但沒能解決我的問題。

來源

2016-06-28 Deadpool

使用此

$('#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">

來源

2016-06-28 07:56:37

jQuery UI工具提示點擊'點擊'而不是懸停

回答

相關問題