jQuery Tools tooltip使用說明

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HTML 複製代碼代碼如下:<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css"
href="./tooltip-generic.css"/>
<style>
#myform {
border:1px outset #ccc;
background:#fff repeat-x;
padding:20px;
margin:20px auto;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}
#myform h3 {
text-align:center;
margin:0 0 10px 0;
}
/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
</style>
</head>
<body><form id="myform" action="#">
<h3>Registration Form</h3>
<div id="inputs">

<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/>
<br />

<label for="password">Password</label>
<input id="password" type="password" title="Make it hard to guess." />
<br />

<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." />
<br />

<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea>
<br />

<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>

<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>
<p>
<button type="button" title="This button won't do anything">
Proceed
</button>
</p>
</form>

<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
});
</script>
</body>
</html>

CSS 複製代碼代碼如下:/* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}

CSS可以不需要，這樣顯示的樣子噁心了點。
關鍵代碼：複製代碼代碼如下:// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
tipClass:'tooltip', // 省卻值：tooltip，少了這一行效果也是一樣
// custom opacity setting
opacity: 0.7
});

使用
這裡是可能存在的最簡單的工具提示的初始化:

$("#myform :input").tooltip();配置

屬性	預設值	描述
cancelDefault	`true`	自從1.1.0版。當工具提示內容抓取從標題觸發器元素的屬性這個屬性取消預設工具提示執行的行為瀏覽器。這是通過簡單的移除這個標題屬性從觸發器。你仍然可以檢索/修改標題值通過調用 jQuery的資料('title') 方法為觸發。
effect	`'toggle'`	指定了如何顯示和隱藏的提示。有兩個內建的效果,可以用作值: toggle 。一個簡單的顯示/隱藏效果。這是預設 fade 。一個簡單的淡入/淡出效果還有一個投影片效果不包括在該工具本身。你可以構建你自己的。
delay	`30`	指定工具提示依然可見多久後滑鼠葉子觸發器。這是必需的,如果tootip已互動的內容和使用者將需要時間去 tootip地區。通過設定0工具提示也會消失滑鼠離開就從觸發器元素。
events	`Object`	一個設定物件,它指定當工具提示會顯示和隱藏。您可以指定不同的事件不同類型的元素。這裡有預設值為這個屬性: events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" } JavaScript 你可以閱讀更多關於這方面的內容這個事件管理一章。
layout	`'<div/>'`	自從1.2.0 HTML布局為產生的工具提示。可以很複雜的HTML布局如你所願。你可以,例如,添加一個嵌套的跨度元素作為箭的預留位置。
offset	`[0, 0]`	精細地調節工具提示指定位置這個位置屬性。看到這個定位細節更多的資訊。
opacity	`1`	透明的工具提示。例如,0意味著不可見, 1意味著沒有透明度(完全可見)和0.4意味著40% 工具提示顯示的。如果你的工具提示使用CSS背景映像,你可以設定透明度的形象,如果它已經儲存在PNG24圖形格式。記住,互連網 IE 6不支援原生透明的PNG。
position	`'top center'`	指定位置的工具提示。看到這個定位細節更多的資訊。舊的格式:['top', 'center'] 是廢棄,在未來將會被移除。
predelay	`0`	自從1.1.0版。指定了延遲(在毫秒)工具提示顯示之前。預設情況下有沒有延遲。
relative	`false`	自從1.1.1。預設情況下,工具提示位置現在決定相對於文檔(通過使用這個 relative)的方法。通過啟用這個產權工具提示的位置是相對確定的父元素
tip		一個jQuery選取器為一個單一的工具提示的元素。對於樣本 # mytip 。該選項僅有效如果你要手動定義一個工具提示多個觸發器同時元素。因為1.2.5 標題屬性仍然可以被用作工具提示內容。
tipClass	`'tooltip'`	自從1.2.0。 CSS類名產生的工具提示的元素。

事件
確保你已經閱讀大約事件 jQuery工具。所有事件監聽器接收這個事件對象作為第一個參數。

事件	觸發事件
onbeforeshow	在工具提示顯示。第二個參數是工具提示要使用位置。這是一個對象的值{top: integer, left: integer}
onShow	在工具提示顯示。
onBeforeHide	在工具提示是隱藏的
onHide	當這個工具提示是隱藏的。

下面的樣本是一個onShow 回呼函數, 淡出觸發器元素當工具提示顯示: 複製代碼代碼如下:$("label").tooltip({
// change trigger opacity slowly to 0.8
onShow: function() {
this.getTrigger().fadeTo("slow", 0.8);
}
});

事件管理
jQuery工具提示可以讓你完全控制當工具提示將顯示或隱藏。您可以指定不同的事件不同類型的元素。你可以控制這種行為這個事件組態變數,它具有以下預設值: 複製代碼代碼如下:events: {
def: "mouseenter,mouseleave", // default show/hide events for an element
input: "focus,blur", // for all input elements
widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button
tooltip: "mouseenter,mouseleave" // the tooltip element
}

指令碼 api
首先確保你已經瞭解你自己與 jQuery工具指令碼。

以下列出的是所有API方法:

方法	傳回值	描述/例子
show()	`api`	顯示工具提示。
hide()	`api`	隱藏工具提示。
isShown(fully)	`布爾`	返回真正的如果這個工具提示是可見的。自從1.2.0 你也可以使用一個布爾型參數,保證了函數返回真正的只有當這個工具提示是充分的可見(在它的最終位置和不透明性)。
getTip()	`jQuery`	返回tooltip作為一個jQuery對象。
getTrigger()	`jQuery`	返回元素作為一個jQuery對象的觸發。
getConf()	`對象`	返回工具提示配置。

內建的效果: fade
內建的效果“漸”有它自己的一組配置選項如下:

屬性	預設值	描述
fadeInSpeed	400	淡入時速度顯示工具提示,以毫秒為單位。
fadeoutspeed	200	當工具提示的淡出速度是隱藏著的,以毫秒為單位。

下面有個自訂事件的例子：http://jquerytools.org/demos/tooltip/custom-effect.htm
　　tab：傳送門
　　tab(投影片)：傳送門
　　tooltip：傳送門
　　overlay：傳送門
　　dateinput：傳送門
在攜程做著framework2.0，研究的卻是framework4.0，當時是怎麼想的T.T。全是TMD老技術和堆代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery Tools tooltip使用說明

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support