想達到點選(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();
});
});
}
});
我這邊寫一個不使用JQuery UI作法給你參考
建立點擊事件,當點擊時顯示tooltip ->
並建立mouseout事件,離開指定dom時隱藏tooltip
把mouseout裡面的$(".tooltip")
換成$(".tooltip .tooltiptext")
就可以
修改css,讓tooltip方向由上轉為下
點擊時顯示:
滑鼠移開時隱藏tooltip:
<!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>
有問題再跟我說 :-)
應該是這樣,不過不用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();
});
});
修改內容了
呃…這部份應該要是動態,而不是寫死,當視窗捲動或縮放時,才改變顯示在上面或下面,tooltip元件有處理這個部份,所以才無法用一般作法,當然除非自己開發這部份,但不是很容易處理
希望有幫助~
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寫法好處理._."