Cara Membuat Tooltip

Buat kalian yang bingung apa itu tooltip, tooltip ini semacam hover pop up yang muncul bisa ke atas, ke samping, atau kebawah, tergantung yang mengcoding scriptnya,
tooltip ini tidak bisa untuk gambar, ini hanya bisa untuk text saja, kecuali kalian mengcodingnya sendiri,

Scriptnya ini buatan James Smith, salah satu user tutsplus, saya disini hanya membagikan ke kalian saja, untuk diterapkan ke dalam Blogger atau Website, tergantung dari Platform apa yang kalian gunakan,

Mungkin penjelasan  saya tidak berguna, jadi langsung saja ke tutorialnya,
pertama pastinya kalian Login ke Blogger Kalian,
pilih Templates/Tema > Edit HTML
dan masukkan CSS dibawah ini sebelum kode </style> , biasanya kode </style> ada banyak, kalian pilih aja sesuka kalian, yang ada tempat banyak kode CSS yang lainnya

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

Dan Klik Save/Simpan

Untuk Pengguna Wordpress, Wix atau Lainnya kalian hanya perlu memasukkan kode CSS diatas tersebut sesuai platform yang kalian gunakan, atau kalian bisa menambahkan, pada suatu file yang banyak menyimpan file CSS.
Biasanya penugguna Bootstrap akan membuat File CSS baru,

Selanjutnya, untuk menampilkan Tooltipnya kalian hanya perlu menggunakan kode HTML, seperti dibawah ini.

<span tooltip="Tooltip Up" flow="up">VAMOUS.ID</span>

• Ganti kata VAMOUS.ID dengan kata/teks yang kalian inginkan,
• Ganti kata "Tooltip Up" dengan kata/teks yang kalian inginkan
• Pada flow="up" : ganti kata/teks "up" dengan teks seperti bawah ini.

up : untuk ke atas
right : untuk ke kanan
left : untuk ke kiri
down : untuk ke bawah

untuk contohnya bisa kalian klik button Demo dibawah ini.

DEMO

Jika masih bingung silahkan bertanya dikolom komen bawah.