iT邦幫忙

0

jquery ui tooltip 問題

  • 分享至 

  • xImage

想達到點選(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
不行,是指mouseout的時候隱藏,不是click的方式~
ccutmis iT邦高手 2 級 ‧ 2018-04-09 17:05:24 檢舉
我重新在下方回覆建議方式了,希望有幫助喔~
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
暐翰
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


有問題再跟我說 :-)

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

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

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

更新了

應該是這樣,不過不用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 檢舉

修改內容了

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

1
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寫法好處理._."

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

還是不對~/images/emoticon/emoticon06.gif

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

咦...你問的不是滑鼠點了出現Tooltip 滑鼠移開時消失嗎?
有把html作了一些小修正,樓主有空時可以參考看看~

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

ccutmis iT邦高手 2 級 ‧ 2018-04-10 16:22:41 檢舉

修改好了...

我要發表回答

立即登入回答