MooTools - Tip alat
MooTools menyediakan keterangan alat yang berbeda untuk merancang gaya dan efek khusus. Di bab ini, kita akan mempelajari berbagai opsi dan kejadian tooltips, serta beberapa alat yang akan membantu Anda menambah atau menghapus tooltips dari elemen.
Membuat Tooltip Baru
Membuat tooltip sangat sederhana. Pertama, kita harus membuat elemen tempat kita akan memasang tooltip. Mari kita ambil contoh yang membuat tag anchor dan menambahkannya ke kelas Tips di konstruktor. Perhatikan kode berikut.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Lihat kode yang digunakan untuk membuat tooltip.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Contoh
Contoh berikut menjelaskan ide dasar Tooltips. Perhatikan kode berikut.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Anda akan menerima output berikut -
Keluaran
Opsi Tooltip
Hanya ada lima opsi dalam Tip dan semuanya cukup jelas.
showDelay
Bilangan bulat diukur dalam milidetik, ini akan menentukan penundaan sebelum tooltip ditampilkan setelah pengguna mengarahkan mouse ke elemen. Defaultnya disetel ke 100.
hideDelay
Sama seperti showDelay di atas, bilangan bulat ini (juga diukur dalam milidetik) menentukan berapa lama menunggu sebelum menyembunyikan tip setelah pengguna meninggalkan elemen. Defaultnya disetel ke 100.
nama kelas
Ini memungkinkan Anda menyetel nama kelas untuk tooltip wrap. Defaultnya diatur ke Null.
Mengimbangi
Ini menentukan seberapa jauh dari elemen tooltip akan muncul. 'x' mengacu pada offset kanan, di mana 'y' adalah offset bawah (keduanya relatif terhadap kursor JIKA opsi 'tetap' disetel ke false, jika tidak offset relatif terhadap elemen asli). Default-nya adalah x: 16, y: 16
Tetap
Ini mengatur apakah tooltip akan mengikuti mouse Anda jika Anda bergerak di sekitar elemen. Jika Anda menyetelnya ke true, tooltip tidak akan bergerak saat Anda menggerakkan kursor, tetapi akan tetap sesuai dengan elemen aslinya. Defaultnya disetel ke false.
Peristiwa Tooltip
Peristiwa tooltip tetap sederhana, seperti yang lainnya di kelas ini. Ada dua acara - onShow dan onHide, dan berfungsi seperti yang Anda harapkan.
sedang tampil()
Acara ini dijalankan ketika tooltip muncul. Jika Anda menyetel penundaan, acara ini tidak akan dijalankan hingga penundaan selesai.
onHide ()
Tooltip bersembunyi dengan pelaksanaan acara ini. Jika ada penundaan, acara ini tidak akan dijalankan hingga penundaan selesai.
Metode Tooltip
Ada dua metode untuk tooltips - pasang dan lepas. Ini memungkinkan Anda menargetkan elemen tertentu dan menambahkannya ke objek tooltip (dan karenanya, mewarisi semua setelan dalam instance kelas itu) atau melepaskan elemen tertentu.
melampirkan()
Untuk melampirkan elemen baru ke objek tooltip, cukup nyatakan objek tip, tack on .attach () ;, dan terakhir tempatkan pemilih elemen di dalam tanda kurung ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Metode ini berfungsi seperti metode .attach, tetapi hasilnya benar-benar sebaliknya. Pertama, nyatakan objek tip, lalu tambahkan .dettach (), dan terakhir tempatkan pemilih elemen Anda di dalam ().
Syntax
toolTips.dettach('#tooltipID3');Example
Mari kita ambil contoh yang menjelaskan tooltip. Perhatikan kode berikut.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text',
'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Anda akan menerima output berikut -
Output