Tooltip yang keberadaannya selalu menyertai sebuah syntax link dimana jika kita memberikan attribute title didalamnya maka akan muncul. Secara default browsingan memang sudah ada fasilitas ini. Silahkan sobat cari link yang diberi title, lalu tunjuk dengan kursor maka akan terlihat si judul itu :D
Datang dari OnWebDev dimana pemiliknya selalu update terus mengenai jQuery, CSS, Javascript, dan lain-lainnya. Beben si bloglang anu ganteng kalem tea ini akan berbagi bagaimana membuat sticky tooltip dengan bantuan jQuery script. Beben memilih yang ini karena terlihat simpel dan tentunya gaya punya sob.
Setiap sobat membuat sebuah syntax link tinggal menambahkan atribut class="tooltip"
Happy tooltip \m/
Datang dari OnWebDev dimana pemiliknya selalu update terus mengenai jQuery, CSS, Javascript, dan lain-lainnya. Beben si bloglang anu ganteng kalem tea ini akan berbagi bagaimana membuat sticky tooltip dengan bantuan jQuery script. Beben memilih yang ini karena terlihat simpel dan tentunya gaya punya sob.
Jika sobat mau melihat & membaca artikel sebelumnya mengenai tooltip diblog ini ada juga loh:
Itulah beberapa info mengenai tooltip keren punya. Mari kita lanjut ke versi @gabromanatoKode CSS
#tooltip-wrapper {
position: absolute;
width: auto;
height: auto;
background: #333;
padding: 5px 10px;
text-align: center;
display: none;
font-weight: bold;
color: #fff;
border: 1px solid #FF0000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 5px 5px 5px #888888;
-moz-box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888;
}
Letakan diatas kode ]]></b:skin>position: absolute;
width: auto;
height: auto;
background: #333;
padding: 5px 10px;
text-align: center;
display: none;
font-weight: bold;
color: #fff;
border: 1px solid #FF0000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 5px 5px 5px #888888;
-moz-box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888;
}
jQuery Script
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var tooltipWrapper = '<div id="tooltip-wrapper"><div id="tooltip-inner"></div></div>';
$('body').append(tooltipWrapper);
var tooltipTitle;
var tooltipInner = $('#tooltip-inner');
$('a.tooltip').hover(function() {
if ($(this).attr('title')) {
tooltipTitle = $(this).attr('title');
$(this).attr('title', '');
}
tooltipInner.html(tooltipTitle);
$('#tooltip-wrapper').show();
}, function() {
$('#tooltip-wrapper').hide();
tooltipInner.html('');
if (tooltipTitle) {
$(this).attr('title', tooltipTitle);
}
}).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
var tx = $('#tooltip-wrapper').outerWidth();
var ty = $('#tooltip-wrapper').outerHeight();
var bodyX = $('body').outerWidth();
var bodyY = $('body').outerHeight();
$('#tooltip-wrapper').css({
top: y + ty > bodyY ? y - ty : y,
left: x + tx > bodyX ? x - tx - 10 : x + 15
});
});
});
//]]>
</script>
Letakan diatas tag </body>//<![CDATA[
$(document).ready(function() {
var tooltipWrapper = '<div id="tooltip-wrapper"><div id="tooltip-inner"></div></div>';
$('body').append(tooltipWrapper);
var tooltipTitle;
var tooltipInner = $('#tooltip-inner');
$('a.tooltip').hover(function() {
if ($(this).attr('title')) {
tooltipTitle = $(this).attr('title');
$(this).attr('title', '');
}
tooltipInner.html(tooltipTitle);
$('#tooltip-wrapper').show();
}, function() {
$('#tooltip-wrapper').hide();
tooltipInner.html('');
if (tooltipTitle) {
$(this).attr('title', tooltipTitle);
}
}).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
var tx = $('#tooltip-wrapper').outerWidth();
var ty = $('#tooltip-wrapper').outerHeight();
var bodyX = $('body').outerWidth();
var bodyY = $('body').outerHeight();
$('#tooltip-wrapper').css({
top: y + ty > bodyY ? y - ty : y,
left: x + tx > bodyX ? x - tx - 10 : x + 15
});
});
});
//]]>
</script>
Save
Demo
demoSetiap sobat membuat sebuah syntax link tinggal menambahkan atribut class="tooltip"
<a href="http://embah-google.blogspot.com/" target="_blank" title="Embah Goolge" class="tooltip">Embah Goolge</a>
Silahkan mau yang mana, tinggal pilih saja :) See you...:-hHappy tooltip \m/
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...