Tentang Tooltip Deskripsi pada Formulir HTML

Memaksimalkan kerja selektor adjacent sibling sangat bermanfaat untuk menciptakan komunikasi yang lebih hidup pada saat proses pengisian formulir untuk pengunjung/anggota. Idenya adalah, seorang calon anggota mencoba untuk mengisi formulir. Dan saat kursor teks aktif di dalam elemen formulir tersebut, maka akan muncul pesan singkat di sebelahnya yang menjelaskan tentang apa saja yang harus calon anggota lakukan terhadap formulir yang sedang aktif tersebut.

Ide di atas bisa kita realisasikan hanya dengan cara seperti ini:

HTML

<input type="text">
<label>Mohon ketik setiap awalan dengan huruf kapital</label>

CSS

/* Menyembunyikan label-label formulir */
label {visibility:hidden}

/* Menampilkan label formulir saat elemen input terfokus */
input:focus + label {visibility:visible}

Yang kemudian akan menghasilkan komunikasi antarmuka seperti ini:

Lihat Demo

Melakukan beberapa pembaharuan pada tampilan elemen <label> untuk membuatnya tampak sebagai tooltip serta menambahkan efek transisi untuk memperlembut proses tampilnya deskripsi/pesan formulir, maka akan membuat komunikasi antarmuka menjadi semakin tegas tanpa harus meminta pengunjung yang sedang mengisi formulir tersebut pergi menuju ke halaman khusus mengenai panduan cara mengisi formulir. Dengan cara ini, pengunjung/calon anggota akan dipandu pada saat yang sama ketika mereka sedang mengisi formulir:

HTML

<div class="form-item">
    <input type="text">
    <label>Descriptions...</label>
</div>

CSS

/* Form item wrapper */
.form-item {
  margin:1em 0 0;
  position:relative;
}

/* Form item title */
.form-item strong {
  display:block;
  margin:0 0 5px;
}

/* Form items */
.form-item input,
.form-item textarea {
  display:block;
  border:1px solid #ccc;
  padding:4px;
  margin:0 0;
  width:250px;
  font:inherit;
  line-height:normal;
  color:inherit;
  -webkit-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2);
}

/* Tooltip */
.form-item label {
  display:block;
  position:absolute;
  bottom:100%;
  left:150px;
  margin-bottom:2em;
  font-size:11px;
  font-weight:bold;
  color:white;
  white-space:nowrap;
  line-height:normal;
  padding:.6em 1em;
  background-color:black;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  visibility:hidden;
  opacity:0;
  /* Transition effect */
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out;
}

/* Tooltip arrow */
.form-item label:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  position:absolute;
  top:100%;
  left:2em;
  border-top-color:black;
}

.form-item input:focus,
.form-item textarea:focus {border-color:#aaa}

/* Show tooltip when the form is being focused */
.form-item input:focus + label,
.form-item textarea:focus + label {
  visibility:visible;
  opacity:1;
  margin-bottom:-.5em;
}

Lihat Demo

Read more »

Generator HTML Peta Gambar Palsu

Alat ini digunakan untuk membuat image map palsu menggunakan elemen HTML. Beberapa orang lebih memilih menggunakan yang palsu karena lebih fleksibel. Pada intinya alat ini digunakan untuk mempermudah di dalam merancang ukuran dan posisi lokasi pada tiap bagian di dalam gambar. Mengenai elemen apa yang akan Anda gunakan dan bagaimana Anda memodifikasi tampilannya, itu terserah Anda:

Coba Alat

Bagi para pembaca yang belum mengerti apa itu image map, kalian bisa memulai mempelajarinya di sini. Dan berikut ini adalah contoh gambar yang dihasilkan dari alat yang Saya buat di atas. Coba letakkan pointer mouse Anda di atas wajah-wajah atau badan tokoh kartun di bawah ini untuk mengetahui nama mereka:

Cara Menggunakan

Ambillah sebuah foto atau gambar dimana di dalamnya terdapat beberapa bagian yang memerlukan detail khusus. Misalnya foto keluarga atau peta negara, lalu unggah foto atau gambar tersebut pada blog Anda. Ambil URL gambarnya, kemudian letakkan di dalam input URL yang tersedia. Setelah itu klik tombol Create. Klik tombol Add Location untuk menambahkan lokasi/koordinat baru pada gambar. Geser dan ubah ukurannya sesuai keinginan. Kode HTML akan tampil di bagian area teks sebelah kanan.

Read more »

Tooltip Kustom Otomatis untuk Semua Tautan

<script type="text/javascript">
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {

    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#FFE13F";
        t.style.border = "1px solid #BC5F05";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
        t.style.padding = "5px 10px";
        t.style.color = "#000";
        t.style.maxWidth = "170px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');

    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";

    }

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();
//]]>
</script>

Salin kodenya dan letakkan di atas tag </body>

Demo

Read more »

MyTooltip JQuery Plugin

MyTooltip is a very lightweight JQuery tooltip plugin see? I made ​​this just to give something simple to you who just want to beautify the default tooltip appearance.

MyTooltip adalah plugin JQuery yang luar biasa ringan. Saya membuat ini sekedar untuk memberikan alternatif yang jauh lebih sederhana sebagai pengganti plugin tooltip yang lain kepada Anda yang hanya ingin mempercantik tampilan tooltip standar:

Lihat Demo Unduh Plugin

Dasar Penggunaan

Sertakan JQuery dan plugin tooltip di atas kode </head>. Untuk memodifikasi tampilan tooltip, cukup seleksi elemen yang Anda inginkan kemudian terapkan method .myTooltip() seperti ini:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/mytooltip.js"></script>
<script type="text/javascript">
$(function() {
    $('a').myTooltip();
});
</script>

Pengaturan Lanjutan

Ada sedikit opsi lanjutan yang bisa Anda atur di sini (seperti yang Saya katakan di atas: luar biasa ringan) yaitu meliputi atribut, posisi dan efek:

$('a').myTooltip("title", {
    top: 20,
    left: 20,
    fade: false,
    time: 400
});

Opsi	Keterangan
"title"	Artinya bahwa tooltip akan menampilkan teks yang berasal dari atribut title pada elemen target. Sebagai contoh, jika Anda mengubah "title" menjadi "href", maka tooltip yang tampil berupa URL
top	Digunakan untuk mengatur jarak atas tooltip dari pointer
left	Digunakan untuk mengatur jarak samping kiri tooltip dari pointer
fade	Jika bernilai true maka tooltip akan ditampilkan dengan efek animasi .fadeIn()
time	Digunakan untuk mengatur kecepatan efek .fadeIn()

Contoh Penerapan: Atribut Pengganti

Katakanlah kita tidak ingin menampilkan teks tooltip dari atribut title, maka kita bisa mengubah target atributnya seperti ini:

<img src="your-image.jpg" alt="This is a tooltip!" />

$('img').myTooltip("alt"); // Tooltip akan menampilkan nilai atribut alt dari gambar

Contoh Penerapan: Modifikasi Posisi

Posisi tooltip terhadap pointer bisa dimodifikasi:

$('a').myTooltip("title", {
    top:50,
    left:70
}); // Tooltip akan memiliki jarak atas
    // sebesar 50 piksel dan jarak samping
    // sebesar 70 piksel

Contoh Penerapan: Mengaktifkan Efek Fade Saat Tooltip Ditampilkan

Set opsi fade menjadi true dan tentukan kecepatan animasi pada opsi time jika perlu:

$('a').myTooltip("title", {
    fade:true,
    time:1000
});

Contoh Penerapan: Modifikasi Tampilan Spesifik pada Setiap Tooltip

Untuk menciptakan tampilan spesifik tentunya kita membutuhkan kelas yang spesifik juga. Di sini Saya memberikan fasilitas untuk menyisipkan kelas spesifik pada tooltip yang diinginkan dengan cara menambahkan atribut data-custom pada elemen target dengan nilai yang nantinya akan menjadi kelas baru pada tooltip:

<a href="#" data-custom="yourClass" title="This is a custom tooltip!">Example Link</a>

Kemudian atur tampilannya sesuka hati dengan cara menambahkan kode CSS khusus untuk kelas yang sudah Anda tentukan dalam atribut data-custom:

.yourClass {
  background-color:red;
  color:yellow;
  /* Dan sebagainya... */
}

Integrasi Plugin ke Blogger

Masuk ke halaman editor HTML Template Anda:

Mengedit HTML

Temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini dan letakkan di atasnya:

.tooltip {
  background-color:black;
  color:white;
  padding:5px 10px;
  display:block;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
}

Setelah itu temukan kode ini:

</head>

Salin kode ini dan letakkan di atasnya:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/mytooltip/mytooltip.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('a').myTooltip();
});
//]]>
</script>

Jika kode yang Saya beri garis bawah sudah ada di dalam template maka Anda tidak perlu menambahkannya lagi. Hapus script tersebut!

Klik Simpan Template.

Read more »

Jimp - A JQuery Tooltip for Image Preview

Jimp is a lightweight JQuery tooltip plugin for image preview. Very responsive to the viewport position and easy in installation.

Jimp adalah plugin JQuery untuk menampilkan gambar dalam tooltip yang sangat responsif terhadap posisi layar dan mudah dalam hal instalasi. Selalu bisa menjaga posisi dirinya pada daerah yang terlihat. Mendukung URL kustom tanpa harus mengeset pengaturan plugin secara manual. Jimp akan menentukan sendiri URL mana yang akan diambil sebagai penampil gambar:

Lihat Demo Download

Dasar Penggunaan

Wajib menggunakan JQuery versi 1.7 atau di atasnya. Susun JQuery, Jimp dan kode CSS seperti ini. Letakkan semuanya di atas kode </head>

<link rel="stylesheet" media="screen" href="css/jimp.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jimp.js"></script>
<script type="text/javascript">
$(function() {
    $('#example a').jimp();
});
</script>

Markup HTML

Ada dua metode yang bisa Anda lakukan untuk mengaktifkan plugin ini pada elemen. Pertama, mengarahkan tautan langsung kepada URL gambar. Ke dua, mengarahkan tautan ke sebuah halaman situs, kemudian mengeset nilai tooltip dengan URL gambar yang disimpan di dalam atribut data-preview:

<a href="large-image.jpg" title="Your Title"><img src="thumbnail.jpg" alt="thumbnail" /></a>

<a href="page-url.html" data-preview="large-image.jpg" title="Your Title">This is an example link!</a>

Konfigurasi Plugin

Secara default ada beberapa opsi di dalam plugin ini yang bisa Anda sesuaikan sebagai pengaturan lanjutan:

$(function() {
    $('#example a').jimp({
        width: 40, // default width of the tooltip before image loaded
        height: 40, // default height of the tooltip before image loaded
        resizeSpeed: 200, // resize speed of container
        fadeSpeed: 400, // fade speed of image
        delay: 1000, // mouseenter delay before excecuting
        offsetTop: 20, // tooltip offset top from pointer
        offsetLeft: 20, // tooltip offset left from pointer
        linkText: 'save', // save button label
        closeText: '&#215', // close button label
        hideOnOut: false, // if true, then when pointer mouse leave from image/link target, the tooltip will hidden and back to it's normal size
        hideOnChange: false // if true, then when pointer mouse leave from image/link target (and then enter to the other target), the tooltip will hidden and back to it's normal size
    });
});

Opsi	Keterangan
width	Digunakan untuk menentukan lebar tooltip saat pertama kali tampil
height	Digunakan untuk menentukan tinggi tooltip saat pertama kali tampil
resizeSpeed	Digunakan untuk menentukan kecepatan animasi perubahan ukuran tooltip gambar
fadeSpeed	Digunakan untuk menentukan kecepatan efek fading pada gambar
delay	Waktu penundaan sebelum perintah untuk menampilkan tooltip dieksekusi
offsetTop	Jarak atas tooltip terhadap pointer
offsetLeft	Jarak kiri tooltip terhadap pointer
closeText	Label untuk tombol tutup [x]
linkText	Label untuk tombol penyimpan gambar
hideOnOut	Jika true, maka tooltip akan tersembunyi ketika pointer mouse meninggalkan gambar/link target
hideOnChange	Jika true, maka ketika pointer mouse meninggalkan gambar/link target dan kemudian memasuki target yang lain, tooltip akan tersembunyi dan kembali ke ukuran normal. Jika false, tooltip akan terus tampak bersamaan dengan perpindahan target dan akan mengubah ukurannya seiring keberhasilan pointer dalam menemukan target yang baru.

Ini adalah plugin pertama Saya. Mungkin memang masih ada beberapa deklarasi kode yang tidak begitu efisien, tapi setidaknya Saya sudah bisa memastikan bahwa plugin ini bebas dari kesalahan penulisan. Saya sudah mengetesnya pada Web Console, semua peramban mayor dan validasi JavaScript di JSBin dan JSFiddle.
Untuk sementara semuanya akan Saya simpan di Google berhubung Saya belum begitu mahir soal GitHub. Situs JQuery Plugin juga saat ini masih dalam perbaikan.
Ke depannya mungkin akan muncul berbagai plugin baru yang meskipun tidak semenarik plugin-plugin yang sudah ada, tapi bisa dikatakan cukup bermanfaat untuk kalangan umum.

Read more »

Modifikasi Widget AddThis

Menambahkan tooltip pada widget AddThis

Tip sederhana untuk menambahkan tooltip pada widget berbagi AddThis. Saya iseng membuatnya beberapa menit yang lalu :p

Jika Anda adalah pengguna widget AddThis seperti Saya, pasti Anda memiliki markup yang mirip seperti ini:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

Tepat di dalam elemen .addthis_toolbox tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti ini:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <span class="addthis-tooltip">Bagikan kepada teman!</span>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

Sekarang masuklah ke halaman editor HTML blogmu kemudian tambahkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>:

/* Modifikasi widget AddThis */

.addthis_toolbox {
  width:150px;
  position:relative;
  background-color:darkgreen;
  padding:10px 15px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;    
}

.addthis_toolbox .addthis-tooltip {
  display:block;
  width:140px;
  padding:10px 15px;
  position:absolute;
  bottom:100%;
  left:30px;
  z-index:77;
  margin-bottom:40px;
  background-color:black;
  font:bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-align:center;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.addthis_toolbox .addthis-tooltip:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-top-color:black;
  position:absolute;
  top:100%;
  left:15px;
}

.addthis_toolbox:hover .addthis-tooltip {
  visibility:visible;
  opacity:1;
  margin-bottom:20px;
}

/* Akhir modifikasi widget AddThis */

Klik Simpan template.

Lihat Demo

Read more »