Membuat Tooltip Hijau dengan Css dan Javascript

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tooltip Hijau

Script yang terkandung didalam Tooltip ini berbagai macam antara lain Html, Css, Javascript
pada umumnya Tooltip ini banyak digunakan oleh para blogger untuk menarik perhatian pengunjung.
cara memanggilnya Tooltip berbeda dengan Tag pre biasanya Tag pre itu dipanggil dengan <code><pre> isinya </code></pre> Tooltip berguna untuk memodifikasi postingan.

Masuk ke Editor HTML template Anda.
kemudian tambahkan kode CSS berikut di atas kode ]]></b:skin>

.a {
  margin:0 auto;
width:0;
border-color: transparent transparent #14CC60;
border-style: solid;
border-width: 20px;
}

.b {
  position:relative;
  margin:0 auto;
  padding:25px;
  height:auto;
  width:400px;
  background:#14CC60;
  color:#fff;
  text-align:left;
  overflow:auto;
  border-radius:8px;
  box-shadow:0px 3px 6px rgba(0,0,0,0.5);
}

h1 {
  padding:0px 10px;
}

h2 {
  font-size:18px;
  text-align:right;
}

p {
  padding:0px 10px;  
}

.wrap {
  
}

kemudian tambahkan kode Javascript berikut di atas kode </head>

  $(document).ready(function(){
        $('.log-btn').click(function(){
            $('.log-status').addClass('wrong-entry');
           $('.alert').fadeIn(500);
           setTimeout( "$('.alert').fadeOut(1500);",3000 );
        });
        $('.form-control').keypress(function(){
            $('.log-status').removeClass('wrong-entry');
        });

    });

kemudian cara memanggilnya masuk ke postingan Edit HTML

<div class="wrap">
  <div class="a"></div>
    <div class="b">
Ini sebatas demo
  </div>
</div>

Untuk DEMO berikut ini : (klik result)