Adsense Banner

Cara membuat teks tooltips


Kalian pasti pernah melihat teks / tulisan yang muncul pada kata tertentu ketika kamu mengarahkan mouse ke kata tersebut. Kata yang muncul tersebut dinamakan tooltips text atau teks tooltips

Tooltips adalah teks yang muncul ketika kamu mengarahkan mouse / pointer kamu ke kata yang sudah kamu buat.
Tooltips sangat berguna untuk memberikan informasi pendek tentang suatu kata atau kalimat.

Bagaimana cara membuat teks tooltips?

Cara membuat tooltips sangatlah mudah, yang kamu butuhkan hanya beberapa baris HTML dan CSS. Berikut saya akan menjelaskan dengan sebisa saya agar dapat mudah dimengerti.

Pasang kode CSS tooltips

Buka edit template pada tab template di dashboard blogger kamu!

Copy & pastelah kode CSS berikut ini tepat sebelum </style> atau pada bagian CSS (style)

/* Teks tooltips */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Posisi teks tooltips */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* animasi teks tooltips memudar */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* pengaktif teks tooltips */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Simpan template; kemudian


Pasang kode HTML

Pasanglah kode HTML berikut ini di tab HTML! bukan compose!


  <div class="tooltip">
Masukkan kata yang ingin diberi tooltips disini 
<span class="tooltiptext"> Isi teks tooltips </span>
    </div>

ubahlah kata-kata diatas sesuai dengan yang kalian inginkan!

Sekian adalah Cara membuat tooltips pada postingan kamu. Walaupun Saya belum pernah menggunakan teks tooltips ini dalam blog Saya tetapi sudah saya test dan kodenya 100% bekerja.


× Info! Klik dua kali untuk memilih semua code didalam box.

1 comment:

  1. The Star Grand at The Star Grand at The Star Grand
    › jhv › jhv Jun 2, 2021 — Jun 2, 2021 The Star Grand at The Star Grand at The Star Grand at 동두천 출장안마 The Star Grand at The Star Grand at The Star Grand 춘천 출장안마 at The 제주도 출장마사지 Star Grand at The Star Grand at 구리 출장안마 The Star Grand at The 창원 출장안마 Star

    ReplyDelete

Powered by Blogger.