Membuat Tooltips Profil Sosial Media

Artikel Membuat Tooltips Profil Sosial Media ini saya buat berdasarkan tampilan dari link profil Google plus yang jika di sorot dengan mouse akan muncul keteranagn dari profil user di Google Plus dan saya membuat tooltips profil sosial media ini dikarenakan tidak hanya link dari Google plus tapi juga link dari sosial media lainnya seperti Facebook dan Twitter

Seperti apa tampilan tooltips profil sosial media ini? Untuk tampilannya, coba Anda perhatikan kedua gambar diatas, yang sebelah kiri merupakan tampilan dari profil Google plus teman saya dan yang sebelah kanan merupakan tampilan profil saya sendiri yang dilengkapi dengan link dari sosial media. Dari kedua tampilan gambar diatas memang sangat berbeda namun untuk cara kerjanya adalah sama yaitu jika kita menyorot Nama maka akan muncul tampilan seperti kedua gambar diatas

Masih bingung dengan penjelasan diatas? Kalau iya, arahkan mouse ke Nama saya berikut ini

Ana Sriwahyuni TIM Panduan Template Blog

• 
• 
  Ana Sriwahyuni
  Blogger Indonesia
  Bekerja di RSUD Waluyo Jati
  Kraksaan - Probolinggo
• Google+
• Facebook
• Twitter
• www.panduantemplateblog.com
• Blogger: Juni 4, 2014

Bagaimana sudah tidak bingung lagi kan? Menarik bukan? Dan untuk membuat tooltips profil sosial media ini juga tidak terlalu sulit dan tidak menggunakan kode Javascript dan juga tidak mempengaruhi loading blog

Cara Membuat Tooltips Profil Sosial Media

Untuk memasang tooltips profil sosial media ini, silahkan ikuti langkah-langkah berikut ini:

• Login ke akun blogger Anda
• Pilih menu Template >> Edit HTML >> Klik area kode template >> tekan CTRL+F pada keyboard
• cari kode </head> dan salin kode berikut sebelum kode </head>
  <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
  * Kode diatas merupakan link font Awesome, jika di template blog sudah terpasang link tersebut, abaikan pemasangan ini
• Cari kode ]]></b:skin> atau </style> dan salin kode berikut sebelum ]]></b:skin> atau </style>
  

  .user-profile {
    position: relative;
    width:220px;
    height: 32px;
    padding: 8px;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
    clear:both;
  }
  .user-profile span {
    color: #444;
    float: left;
    line-height: 10px;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  }
  .user-profile small {
    display: block;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  }
  .user-profile .teks {
    text-align: center;
    padding: 0px;
    color: #444;
    margin: 0px auto;
    font-size: 12px;
    list-style:none;
  }
  .user-profile .teks current {
    font-size: 20px;
    color: #000;
  }
  .user-profile:hover ul {
    padding: 4px 0 6px;
    visibility: visible;
    opacity: 1;
  }
  .user-profile ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #eef0f4;
    border: 1px solid #ddd;
    border-radius: 5px;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    -webkit-transition-property: opacity, padding, visibility;
    -moz-transition-property: opacity, padding, visibility;
    -o-transition-property: opacity, padding, visibility;
    transition-property: opacity, padding, visibility;
    background-image: -webkit-linear-gradient(top, #dadfe9, #eef0f4);
    background-image: -moz-linear-gradient(top, #dadfe9, #eef0f4);
    background-image: -o-linear-gradient(top, #dadfe9, #eef0f4);
    background-image: linear-gradient(to bottom, #dadfe9, #eef0f4);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  .user-profile ul:before, .user-profile ul:after, .user-profile li:first-child:after {
    content: '';
    display: block;
    position: absolute;
    left: 15px;
    width: 0;
    height: 0;
    border: 7px outset transparent;
  }
  .user-profile ul:before {
    bottom: -14px;
    border-top: 7px solid #555;
  }
  .user-profile li:first-child:after {
    bottom: -13px;
    border-top: 7px solid #fff;
  }
  .user-profile ul:after {
    bottom: -12px;
    border-top: 7px solid #eef0f4a;
  }
  .user-profile li {
    padding: 0 12px;
    font-size: 11px;
    color: #838ca2;
    text-shadow: 0 1px #fff;
  }
  .user-profile .gplus,.user-profile li.fb,.user-profile li.twt,.user-profile .globe {
    position: relative;
  }
  .user-profile .gplus:before {
    content: "\f0d5";
    font-family: FontAwesome;
    padding: 0px;
    margin-right:10px;
    font-size: 11px;
    color: #d14836;
    text-decoration: inherit;
    position: relative;
    text-shadow: 0 1px #fff;
  }
  .user-profile .fb:before {
    content: "\f09a";
    font-family: FontAwesome;
    padding: 0px;
    margin-right:10px;
    font-size: 11px;
    color: #3b5998;
    text-decoration: inherit;
    position: relative;
    text-shadow: 0 1px #fff;
  }
  .user-profile .twt:before {
    content: "\f099";
    font-family: FontAwesome;
    padding: 0px;
    margin-right:10px;
    font-size: 11px;
    color: #55acee;
    text-decoration: inherit;
    position: relative;
    text-shadow: 0 1px #fff;
  }
  .user-profile .globe:before {
    content: "\f0ac";
    font-family: FontAwesome;
    padding: 0px;
    margin-right:10px;
    font-size: 11px;
    color: #f9760b;
    text-decoration: inherit;
    position: relative;
    text-shadow: 0 1px #fff;
  }
  .user-profile li.date {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #b4bbce;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
  }
  .user-profile li.ico {
    text-align: center;
    border-bottom: 1px inset #b4bbce;
    list-style:none;
  }
  .user-profile li img {
    text-align: center;
    width: 100px;
    height: 100px;
    margin: 5px auto;
    border-radius:80%;
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    background:#ddd;
    list-style:none;
  }
  .user-profile li a {
    display: block;
    position: relative;
    margin: 0 -13px;
    padding: 0 20px 0 12px;
    color: #313a4f;
    text-decoration: none;
    border: 1px solid transparent;
  }
  .user-profile li a:hover {
    color: #000;
    background: #bebfc0;
    border-color: #bebfc0 #90939c #898c95;
    background-image: -webkit-linear-gradient(top, #c0c2c9, #bfc5d4);
    background-image: -moz-linear-gradient(top, #c0c2c9, #bfc5d4);
    background-image: -o-linear-gradient(top, #c0c2c9, #bfc5d4);
    background-image: linear-gradient(to bottom, #c0c2c9, #bfc5d4);
  }
  .user-profile li a:hover:after {
    display: block;
  }
  .user-profile li a:after {
    content: '';
    display: none;
    position: absolute;
    top: 30%;
    right: 5px;
    margin-top: -1px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: #eef0f4;
  }

• Simpan template
• Salin kode html berikut ini kedalam blog Anda. Terserah, letak yang diinginkan
  

  <div class="user-profile">
  <span>Ana Sriwahyuni <small>TIM Panduan Template Blog</small></span>
  <ul>
  <li class="ico"><img alt="Ana Sriwahyuni" src="https://lh4.googleusercontent.com/--ZR4TRLpksw/AAAAAAAAAAI/AAAAAAAACGo/H6Ad3Um9u9U/s120-c/photo.jpg" title="Ana Sriwahyuni"></li>
  <li class="teks">
  <current>Ana Sriwahyuni</current>
  Blogger Indonesia
  Bekerja di RSUD Waluyo Jati
  Kraksaan - Probolinggo</li>
  <li><a href="https://plus.google.com/u/0/113748039543292949277" class="gplus" rel="nofollow">Google+</a></li>
  <li><a href="https://www.facebook.com/profil.sriwahyuni" class="fb" rel="nofollow">Facebook</a></li>
  <li><a href="https://twitter.com/Ana_Sriwahyuni" class="twt" rel="nofollow">Twitter</a></li>
  <li><a href="http://www.panduantemplateblog.com" class="globe">www.panduantemplateblog.com</a></li>
  <li class="date">Blogger: Juni 4, 2014</li>
  </ul>
  </div>

  Keterangan:
  Silahkan sesuaikan dengan profil Anda :)
• Selesai

Jika mengalami kesulitan, silahkan tinggalkan komentar untuk artikel blog ini, Membuat Tooltips Profil Sosial Media

JavaScript Image Trail Tooltip

Halaman browse foto di SXC.

Pertama kali Saya melihat tooltip semacam ini di situs SXC. Saya mencoba untuk membuat replikanya dengan tanpa menyertakan dukungan untuk peramban-peramban lawas. document.all itu sudah sangat ketinggalan zaman!

Keistimewaan dari tooltip ini adalah dia bisa bergerak mengikuti gerakan pointer serta bisa mempertahankan posisinya agar tetap berada pada area yang terlihat di halaman agar Anda tidak mengalami masalah-masalah seperti: tooltip keluar terlalu jauh ke sebelah kanan atau ke sebelah bawah dari area terlihat pada halaman. JavaScript ini juga bisa digunakan untuk menggantikan salah satu plugin JQuery Saya yang tidak begitu terkenal dan tidak sering diperbaharui lagi:

JavaScript

/*! JavaScript Image Trail Tooltip by Taufik Nurrohman <http://gplus.to/tovic> */
(function(w, d) {

    var tooltip = d.createElement('div'),
        noImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", // 1 x 1 pixel transparent GIF
        top = 0,
        left = 0,
        docWidth = 0,
        docHeight = 0,
        offsetTop = 20, // Default top distance of the tooltip to the mouse pointer
        offsetLeft = 20, // Default left distance of the tooltip to the mouse pointer
        wait = null;

    // Get the correct width of the document without scrollbars
    function getDocWidth() {
        return d.documentElement.clientWidth;
    }

    // Get the correct height of the document
    function getDocHeight() {
        return Math.max(
            d.body.scrollHeight, d.documentElement.scrollHeight,
            d.body.offsetHeight, d.documentElement.offsetHeight,
            d.body.clientHeight, d.documentElement.clientHeight
        );
    }

    tooltip.id = "trail-image";
    tooltip.className = "trail-image";
    tooltip.innerHTML = '<img src="' + noImage + '" alt="Loading..." style="float:none;display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;border:none;outline:none;background:none;margin:0;padding:0;">';

    // Just like `DOMContentLoaded` event, but only to
    // wait for the existence of the `<body>` element
    // to insert the tooltip markup in the proper area
    function waitForBodyExist() {
        if (!d.body) {
            wait = setTimeout(waitForBodyExist, 100);
        } else {
            clearTimeout(wait);
            d.body.appendChild(tooltip);
            docWidth = getDocWidth();
            docHeight = getDocHeight();
            w.onresize = function() {
                docWidth = getDocWidth();
                docHeight = getDocHeight();
            };
            w.onscroll = hideTrail;
        }
        // console.log('Still waiting...');
    } waitForBodyExist();

    // Function to show the tooltip
    // `width`  => the tooltip width
    // `height` => the tooltip height
    // `file`   => the URL of the image to show
    function showTrail(width, height, file) {
        tooltip.style.visibility = "visible";
        tooltip.children[0].src = file;
        tooltip.style.width = parseInt(width, 10) + "px";
        tooltip.style.height = parseInt(height, 10) + "px";
        d.onmousemove = function(e) {
            if (!e) e = w.event;
            if (e.pageX || e.pageY) {
                left = e.pageX;
                top = e.pageY;
            } else if (e.clientX || e.clientY) {
                left = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
                top = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
            }
            tooltip.style.top = parseInt(((top >= docHeight - (height + offsetTop + 10)) ? top - (height + offsetTop) : top + offsetTop), 10) + "px";
            tooltip.style.left = parseInt(((left >= docWidth - (width + offsetLeft + 10)) ? left - (width + offsetLeft) : left + offsetLeft), 10) + "px";
        };
    }

    // Function to hide the tooltip
    function hideTrail() {
        d.onmousemove = "";
        tooltip.style.top = "-9999px";
        tooltip.style.left = "-9999px";
        tooltip.style.visibility = "hidden";
        tooltip.children[0].src = noImage;
        docWidth = getDocWidth();
        docHeight = getDocHeight();
    }

    // Add to the window object as an external/global function
    w.showTrail = showTrail;
    w.hideTrail = hideTrail;

})(window, document);

CSS

/* Image Trail Tooltip CSS */
.trail-image {
  width:0;
  height:0;
  background-color:#ddd;
  border:1px solid #888;
  position:absolute;
  top:-9999px;
  left:-9999px;
  z-index:9999;
  visibility:hidden;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
}

Penggunaan

Dasar Penggunaan

Ada dua fungsi utama dalam skrip di atas, yaitu showTrail dan hideTrail. showTrail digunakan untuk menampilkan tooltip sedangkan hideTrail digunakan untuk menyembunyikannya. Anda bisa menerapkannya pada atribut onmouseover dan onmouseout seperti ini:

<a href="img/large.jpg">
  <img onmouseover="showTrail(250, 100, &#39;img/medium.jpg&#39;);" onmouseout="hideTrail();" src="img/small.jpg" alt="">
</a>

Tentukan lebar dan tinggi gambar baru pada parameter width dan height serta URL gambar baru yang ingin ditampilkan pada parameter file:

Lihat Demo

Menyimpan Data di dalam Atribut HTML

Menuliskan fungsi berkali-kali secara inline mungkin akan melelahkan. Untuk itu Anda bisa memodifikasinya dengan cara memasukkan setiap URL gambar yang lebih besar di dalam atribut HTML5 data-*:

<img alt="" src="img/small.jpg" data-image-preview="img/medium.jpg">

Kemudian untuk penerapan fungsinya:

(function() {
    var img = document.getElementsByTagName('img');
    for (var i = 0, len = img.length; i < len; ++i) {
        if (img[i].getAttribute('data-image-preview')) {
            img[i].onmouseover = function() {
                showTrail(this.offsetWidth * 3, this.offsetHeight * 3, this.getAttribute('data-image-preview'));
            };
            img[i].onmouseout = hideTrail;
        }
    }
})();

Pada kode di atas Saya menerapkan this.offsetWidth * 3 dan this.offsetHeight * 3 untuk menciptakan skala tooltip menjadi tiga kali lipat dari gambar thumbnail yang didekati pointer. Jadi anggap saja URL yang berada di dalam atribut data-image-preview memiliki ukuran sebesar tiga kali lipat dari thumbnail.

Pastikan DOM sudah berada dalam keadaan siap:

Lihat Demo

Tip untuk Gambar-Gambar dari Picasa

Kita tahu bahwa kita bisa mengubah resolusi gambar yang disimpan di Picasa dengan cara mengubah path /sN pada setiap gambar. Berikut ini adalah contoh penerapan fungsi showTrail dan hideTrail tanpa memerlukan adanya atribut data-image-preview. Sekali Anda menerapkan fungsi ini, maka semua gambar yang berasal dari Picasa dengan ukuran lebar tidak lebih dari 100 piksel akan bisa menampilkan tooltip dengan lebar gambar 400 piksel:

(function() {
    var img = document.getElementsByTagName('img');
    for (var i = 0, len = img.length; i < len; ++i) {
        var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src) && img[i].offsetWidth <= 100);
        if (valid) {
            img[i].onmouseover = function() {
                showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
            };
            img[i].onmouseout = hideTrail;
        }
    }
})();

Lihat Demo

Pembaharuan: Pengecekan lebar gambar yang Saya terapkan di atas terkadang tidak bekerja karena mungkin fungsi telah tereksekusi sebelum dimensi gambar terbentuk, sehingga lebar gambar akan sama dengan 0 dan itu membuatnya bisa lolos dari pengecekan. Anda bisa mengeluarkan logika img[i].offsetWidth <= 100 dan memasukkannya ke dalam event onmouseover seperti ini untuk memastikan agar pengecekan lebar gambar bisa dilakukan setelah dimensi gambar terbentuk setiap kali Anda mendekatkan pointer ke atas gambar:

var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src));
if (valid) {
    img[i].onmouseover = function() {
        if (this.offsetWidth <= 100) {
            showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
        }
    };
    img[i].onmouseout = hideTrail;
}

Lihat Demo

Catatan Tambahan untuk Internet Explorer

Pastikan deklarasi <!DOCTYPE html> dinyatakan pada dokumen HTML Anda agar skrip ini bisa bekerja dengan baik. Selain itu, menambahkan tag meta ini sedekat mungkin dengan <head> juga bisa mencegah Internet Explorer untuk berubah ke mode compatibility view tanpa kita kehendaki:

<meta http-equiv='X-UA-Compatible' content='IE=Edge'>

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

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.