Ocha Wap

Cara Buat Tooltip

Ikuti Tutor Singkat dibawah ini .. untuk cara pemBuatan dan cara pemasangannya .. hal pertama yang harus sobat lakukan ialah mencopy kode script di bawah ini ..

1. Simpan Kode Dibawah ini .. dibagian <head> pada template wap / blog sobat

2. Copas Juga Css Dibawah ini .. jika dirasa perlu .. tidakpun tidak apa - apa

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

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

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

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

3. Cara Buatnya

Jika kode diatas sudah sobat copas .. sekarang ketahap pembuatannya .. untuk cara buatnya lihat kode dibawah ..

1. Contoh Tooltip Atas
<a href="http://0ch423.wapgem.com" data-toggle="tooltip" data-placement="top" title="Ocha Wap">Tooltip Atas</a>

2. Contoh Tooltip Bawah
<a href="http://0ch423.wapgem.com" data-toggle="tooltip" data-placement="bottom" title="Ocha Wap">Tooltip Bawah</a>

3. Contoh Tooltip Kanan
<a href="http://0ch423.wapgem.com" data-toggle="tooltip" data-placement="right" title="Ocha Wap">Tooltip Kanan</a>

4. Contoh Tooltip Kiri
<a href="http://0ch423.wapgem.com" data-toggle="tooltip" data-placement="left" title="Ocha Wap">Tooltip Kiri</a>

Keterangan :

Ganti http://0ch423.wapgem.com dengan link tujuan ..
Untuk warna Pink Posisi Tooltip Text Nya .. antara atas / bawah / kiri / kanan ..
untuk warna Red Sesuaikan dengan judul link sobat .. misal link about .. beri nama about .. dan seterusnya
Untuk Hasilnya silahkan klik satu - satu pada bagian Read More Yang ada pada profil di atas ..

Back To Post : Cara Buat Bootstrap Tooltip

Contoh Tooltip Bottom ( Bawah )

Contoh Tooltip Left ( Kiri )

Contoh Tooltip Top ( Atas )

Contoh Tooltip Right ( Kanan )

Cara Buat Tooltip

1. Simpan Kode Dibawah ini .. dibagian <head> pada template wap / blog sobat

2. Copas Juga Css Dibawah ini .. jika dirasa perlu .. tidakpun tidak apa - apa

3. Cara Buatnya

Keterangan :