Tooltip Tippy Plugin untuk Sosial Media (Sosmed)

28/05/2019    Risman Hakim    124     Website

Tooltip Tippy Plugin untuk Sosial Media (Sosmed) - Tooltip merupakan suatu informasi yang biasanya di sematkan pada item dan biasa nya terdapat pada link halaman website, tooltip bisa berupa gambar teks ataupun elemen yang lain. Dengan tooltip ini pengguna bisa lebih mudah dalam menemukan penjelasan singkat dari suatu link yang akan dibaca. Selain itu dengan tooltip ini desain akan lebih sederhana dan akan lebih mudah di pahami karena di muat dalam bentuk icon, gambar dan elemen yang lain - lain.

Ada banyak sekali penyedia plugin tooltip yang bisa kita manfaatkan untuk bisa di tambahkan pada halaman website, salah satu yang akan saya bagikan yaitu tooltip dari Tippy plugin, dimana tooltip ini mempunyai desain yang sederhana dan cantik sehingga akan menambah style yang lebih menarik lagi pada halaman website. Nah, berikut ini akan saya jelaskan bagaimana cara membuat tooltip Tippy plugin pada tampilan sosial media (sosmed).

Kode HTML

Langkah pertama, buatlah satu file index.html untuk membuat layout tooltip, pada kasus ini saya akan terapkan pada icon sosial media. Silahkan ketikan kode HTML berikut.

<body>
    <ul>
        <a href="#" id="facebook"><li><i class="fab fa-facebook-f"></i></li></a>
        <a href="#" id="instagram"><li><i class="fab fa-instagram"></i></li></a>
        <a href="#" id="twitter"><li><i class="fab fa-twitter"></i></li></a>
        <a href="#" id="google"><li><i class="fab fa-google-plus-g"></i></li></a>
        <a href="#" id="linkedin"><li><i class="fab fa-linkedin-in"></i></li></a>
        <a href="#" id="whatsapp"><li><i class="fab fa-whatsapp"></i></li></a>
    </ul>
</body>

Kode CSS

Setelah membuat layout tooltip seperti diatas, langkah selanjutnya adalah mendesai tampilan tooltip dengan kode CSS. Utnuk itu silahkan ketikan kode CSS untuk tooltips sosial media (sosmed) berikut ini.

body {
    padding: 50px 20px;
    font-family: 'Source Sans Pro', sans-serif;
}

ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content:space-around;
    width: 400px;
}
ul li {
    font-family: 'Source Sans Pro', sans-serif;
    list-style: none;
    font-size: 26px;
    border:solid #585858 2px;
    border-radius: 400px;
    width: 50px;
    height: 40px;
    display: block;
    text-align: center;
    padding-top: 8px;
}
ul a {
    color: #585858;
}
ul a:hover {
    color: #000;
}
.tippy-popper {
    font-family: 'Source Sans Pro', sans-serif;
}
#facebook li:hover {
    background: #3b5998;
    color: #fff;
}
#instagram li:hover {
    background: #e84393;
    color: #fff;
}
#twitter li:hover {
    background: #55acee;
    color: #fff;
}
#google li:hover {
    background: #dc4b38;
    color: #fff;
}
#linkedin li:hover {
    background: #0077b5;
    color: #fff;
}
#whatsapp li:hover {
    background: #29b200;
    color: #fff;
}

Kode JS

Setelah mendesain tampilan tooltip dengan CSS, langkah berikutnya adalah membuat fungsi tooltip agar bisa berfungsi ketika kursor diarahkan pada salah saltu tooltip. Silahkan ketikan kode JS berikut ini.

<script>
    tippy('#facebook', {
      content: "Facebook",
      placement: 'top',
      arrow: true,
       arrowType: 'round'
    })
    tippy('#instagram', {
      content: "Instagram",
      placement: 'top',
      arrow: true,
       arrowType: 'round'
    })
    tippy('#twitter', {
      content: "Twitter",
      placement: 'top',
      arrow: true,
       arrowType: 'round'
    })
    tippy('#google', {
      content: "Google+",
      placement: 'top',
      arrow: true,
       arrowType: 'round'
    })
    tippy('#linkedin', {
      content: "Linkedin",
      placement: 'top',
      arrow: true,
       arrowType: 'round'
    })
    tippy('#whatsapp', {
      content: "Whatsapp",
      placement: 'top',
      arrow: true,
       arrowType: 'round'
    })
</script>

Library pooper, tippy

Agar tootltip bisa berfungsi tentu library harus di sisipkan, maka dari itu silahkan tambahkan library berikut.

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Library Pooper, Tippy -->
<script src="https://unpkg.com/popper.js@1.15.0/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4.3.1/umd/index.all.min.js"></script>

Setelah semua sintak diatas telah diketikan semua, silahkan simpan kembali file index.html, kemudian kalian bisa buka pada browser masing - masing untuk melihat hasil nya. Maka tampilan tooltip sosial media akan tampak seperti di bawah ini.

Tooltip Tippy Plugin untuk Sosial Media (Sosmed)

Bagaimana, menarik bukan tooltip sosial media nya ? Baik, cukup sekian artikel tentang Tooltip Tippy Plugin untuk Sosial Media (Sosmed), semoga artikel ini bisa bermanfaat, Selamat mencoba :)

jQuery, Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More