jquery ui tooltip 問題

js javascript

跟著鄉民看熱鬧 2018-04-09 11:11:33 ‧ 10282 瀏覽

分享至

想達到點選(click)時出現tooltip，tooltip mouseout時隱藏，
目前僅能做到mousein時出現tooltip，tooltip mouseout時隱藏tooltip，
不知該如何調整？謝謝
註：停留在tooltip時保持顯示。

 <div id="target">
    <span class="target">Hover over me!</span>
    <span class="target">Hover over me too!</span>
</div>

 $('#target').tooltip({
        items: 'span.target',
        content: 'This is a tooltip that appears on click...',
        open: function(event, ui){
            if (typeof(event.originalEvent) === 'undefined') {
                return false;
            }
            var $id = $(ui.tooltip).attr('id');
            $('div.ui-tooltip').not('#' + $id).remove();
        },
        close: function(event, ui) {
            ui.tooltip.hover(function() {
                $(this).stop(true).fadeTo(400, 1);
            }, function() {
                $(this).fadeOut('400', function(){
                    $(this).remove();
                });
            });
        }
  });

ccutmis iT邦高手 2 級 ‧ 2018-04-09 12:08:59 檢舉

https://stackoverflow.com/questions/13057606/jquery-ui-tooltip-manual-open-close

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-04-09 13:04:04 檢舉

不行，是指mouseout的時候隱藏，不是click的方式～

ccutmis iT邦高手 2 級 ‧ 2018-04-09 17:05:24 檢舉

我重新在下方回覆建議方式了，希望有幫助喔～

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

暐翰

iT邦大師 1 級 ‧ 2018-04-09 13:48:22

我這邊寫一個不使用JQuery UI作法給你參考

原理:

建立點擊事件，當點擊時顯示tooltip ->
並建立mouseout事件，離開指定dom時隱藏tooltip

新問題1:

把mouseout裡面的$(".tooltip")換成$(".tooltip .tooltiptext")就可以

新問題2:

修改css，讓tooltip方向由上轉為下

效果:

點擊時顯示:

滑鼠移開時隱藏tooltip:

Code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 12;
    top: 100%;
    left: 50%;
    margin-left: -60px;
    margin-top: 20px;
}


</style>
<body style="text-align:center;">
<div class="tooltip">按一下顯示tooltip
  <span class="tooltiptext">你好IT邦幫忙</span>
</div>

<script>

$(document).ready(function(){
  $(".tooltip .tooltiptext").hide();
  $(".tooltip").click(function(){
     $(".tooltip .tooltiptext").show();
  });
  $(".tooltip .tooltiptext").mouseout(function(){
    $(".tooltip .tooltiptext").hide();
  });
});
</script>

</body>
</html>

Codepen網頁連結:

RE:IT幫問題 - jquery ui tooltip

有問題再跟我說 :-)

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-04-09 13:59:52 檢舉

嗯…不大對，是click的時候顯示沒錯，但隱藏必須在tooltip的物件上mouseout才隱藏，而不是在click的物件mouseout時就隱藏，謝謝

暐翰 iT邦大師 1 級 ‧ 2018-04-09 14:03:20 檢舉

更新了

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-04-09 14:04:33 檢舉

應該是這樣，不過不用tooltip物件會有定位的問題，如視窗卷動的時候，原來在上面顯示的tooltip，tooltip物件會自動調整成上方顯示
https://anseki.github.io/jquery-ui-tooltip-altposition/
像連結中的sample2, 所以還是需要用到tooltip物件
以您的例子來說，br 拿掉就看不到了

 $(document).ready(function(){
        $(".tooltip .tooltiptext").hide();
        $(".tooltip").click(function(){
            $(".tooltip .tooltiptext").show();
        });

        $(".tooltiptext").mouseout(function(){
            $(".tooltip .tooltiptext").hide();
        });
    });

暐翰 iT邦大師 1 級 ‧ 2018-04-09 17:49:42 檢舉

修改內容了

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-04-10 09:03:41 檢舉

呃…這部份應該要是動態，而不是寫死，當視窗捲動或縮放時，才改變顯示在上面或下面，tooltip元件有處理這個部份，所以才無法用一般作法，當然除非自己開發這部份，但不是很容易處理

登入發表回應

ccutmis

iT邦高手 2 級 ‧ 2018-04-09 17:03:41

希望有幫助~
tooltip的提示文字在＜span class="target"裡的title="xxxx"設定，
這樣的好處是針對不同的tooltip可以很容易設定個別內容...

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tooltip Show On MouseClick & Hide On MouseOut</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
		$('.target').tooltip({          
		 disabled: true,
		 close: function( event, ui ) { $(this).tooltip('disable'); }
		});

	  $('.target').on('click', function () {
		 $(this).tooltip('enable').tooltip('open');
	   });
  } );
  </script>
<style>
*{padding:10px;}
div{background:#eee;}
span{background:#aaa;}
</style>
</head>
<body>
<div id="" >
    <span class="target" title="This is a 1st tooltip that appears on click...">Hover over me!</span>
    <span class="target" title="This is a 2nd tooltip that appears on click...">Hover over me too!</span>
</div> 
</body>
</html>

我有把上面的html作了一些微調，demo網址給您參考:
http://www.web3d.url.tw/hots/tooltip.htm

我又作了一些修改目前應該是跟樓主描述的效果差不多了
就是用滑鼠點了會出現tooltip泡泡要移到泡泡上再移出去
tooltip泡泡才會消失對嗎-_-"?
總之範例如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tooltip Show On MouseClick & Hide On MouseOut</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$(function() {
      $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
      autoHide:true
    },

    _create: function() {
      this._super();
      if(!this.options.autoHide){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(this.element, "mouseleave focusout");
      }
    }
  });

  
var isTooltipOpened = false;
$('.target').tooltipX({
    autoHide: false
});

$('.target').click(function(e){
    if(!isTooltipOpened) {
		$(this).tooltipX("open");
		isTooltipOpened = true;
	}
	$( ".ui-tooltip" ).on( "mouseleave", function() {
	  $('.target').tooltipX("close");isTooltipOpened = false;
	});
});
  
});
</script>
<style>
*{padding:10px;}
div{background:#eee;}
span{background:#aaa;}
</style>
</head>
<body>
<div>
    <span class="target" title="I'm the first Span, You neet to mouseOver And mouseOut me">Click me!</span>
    <span class="target" title="I'm Second Span, , You neet to mouseOver And mouseOut me">Click me too!</span>
</div> 
</body>
</html>

demo網址給您參考:
http://www.web3d.url.tw/hots/tooltip2.htm

以樓主的需求我個人是比較建議您採用瑋翰網友的解法，調CSS樣式比調jquery.plugin寫法好處理._."