Home » Ask (Forum) » Cara Menampilkan Tooltips di wordpress?

Question

Saya ingin membuat Tooltips pada salah satu blog pribadi saya, Adakah yang dapat membantu saya untuk ini ?
Saya sertakan contoh tampilan/ss dari blog yang ingin saya tiru

Aug 19, 2016 (4 months ago) - Posted by 1 Comment

One Answer

  1. Siti says:

    Semoga dapat menjawab.

    Mari dimulai dengan membuat markup sederhana untuk link html. anda perlu memberikan judul yang akan menjadi isi tooltip, dan menetapkan class:

    <a title="Ini informasi yang anda jadikan tooltips." class="tooltip">CSS3 Tooltip</a>

    Setelah anda membuat Script html Tooltips sekarang anda buat script Css seperti dibawah ini. dan setelah selesai silahkan coba sorot text maka akan keluar informasi dengan gaya tooltips.

    /* Tooltips */
    .tooltip{
        display: inline;
        position: relative;
    }
    .tooltip:hover:after{
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 24px;
        color: #fff;
        content: attr(title);
        left: 10%;
        padding: 5px 10px;
        position: absolute;
        z-index: 98;
        width: 180px;
    }
    .tooltip:hover:before{
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 10%;
        position: absolute;
        z-index: 99;
    }

    Dan kemudian modifikasi Script author box di Single.php anda tambahakan link dengan class tooltip.

    <span class="photo">
    <a title="Hello..! I'am John Mamad Thanks Visit my Blog" class="tooltip">
    <?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' );  } ?>
    </a>
    </span>
    Register Member

Your Answer

Your email address will not be published. Required fields are marked *