Cara Membuat Tooltip Dengan CSS

Cara Membuat Tooltip Dengan CSS – Tooltip adalah komponen user interface, dimana komponen ini dapat muncul ketika ada objek yang disentuh. Tooltip biasa nya berisikan bantuan ataupun informasi.

Cara Membuat Tooltip

Pertama anda buat dulu script html sebagai berikut

Sentuh Ini
   

        Ini Merupakan tooltip yang dibuat menggunakan CSS
       
   

Selanjutnya Script CSS seperti dibawah ini

html {
    font-family:Arial, Helvetica, sans-serif;
}
body {
    background:#0C3;
}
.button {
    width:100px;
    text-align:center;
    color:#fff;
    background:#96F;
    border-radius:5px;
    padding:15px;
    font-weight:bold;
    margin:15% auto;
    position:relative;
}
.tooltip {
    position:absolute;
    top:-90px;
    right:0px;
    background:#fff;
    width:300px;
    padding:15px;
    border-radius:10px;
    color:#000;
    display:none;
}
.tooltip img{
    height:20px;
    position:absolute;
    bottom:-20px;
}
.button:hover .tooltip {
    display:block;
}

Penjelasan

  • tag ini yang akan penulis jadikan objek.
  • Ini bagian tooltip yang akan muncul ketika objek disentuh.
  • Pada .tooltip  terdapat properti display:none; , ini adalah kondisi saat tooltip semula, yang itu tidak tampil.
  • Pada .button:hover .tooltip  terdapat properti display:block; , ini adalah kondisi objek disentuh yang mengubah properti display:none; menjadi  display:block; 

Membuat Jendela Pop Up Sederhana Dengan CSS

jendela popup menggunakan css

Jendela Pop Up adalah bagian dari website yang kedudukannya di atas element – element lain. Pada tutorial kali ini saya akan memberikan contoh jendela popup sederhana menggunakan CSS tanpa javascript. Untuk membuatnya ikuti langkah – langkah berikut.

Pertama buat script html seperti di bawah ini

Setelah itu kita buat style nya

html {
    font-family:calibri;
}
h1 {
    margin:0px;
}
#popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
}
.jelndela-popup {
    position:relative;
    padding:15px;
    background:#fff;
    width:500px;
    margin:15% auto 0;
    border-top:5px solid #96C;
}  
.close {
    position:absolute;
    right:15px;
    top:10px;
    color:#96c;
    text-decoration:none;
    font-size:20px;
    font-family:Tahoma, Geneva, sans-serif;
    padding:5px 10px;
    background:#eee;
}
.tombol-popup{
    width:200px;
    text-align:center;
    margin:15% auto 0;
    border-radius:5px;
    color:#fff;
    text-decoration:none;
    background:#96C;
    overflow:hidden;
    box-shadow:0px 0px 5px #000;
}
.tombol-popup a{
    padding:20px;
    display:block;
    font-size:20px;
    color:#fff;
    text-decoration:none;
}
#popup:target {
    display:block;
}

Penjelasan

  • #popup:target yang akan digunakan untuk memunculkan jendela popup, karena link dari tombol popup mengarah ke #popup. 
  • Karena div#popup yang akan menjadi target maka kita tambahkan #popup:target pada script css dan memberi style display:block, agar div#popup bereaksi pada saat kita mengklik tombol popup yang memiliki link #popup.

Penjelasannya agak ribet, kalau belum jelas silahkan berikan komentar….
Selamat Mencoba

    [ Desain Web ] Pengenalan CSS, Selektor, dan Penempatan Code CSS

    Cascading Style Sheets (CSS)

    Cascading Style Sheet (CSS)

    CSS dirancang untuk mengatur tampilan (style dan layout) halaman web. Banyak hal yang bisa dibuat oleh css, dari mengatur bingkai element, pewarnaan latar belakang (background) yang bergradiasi, pembuatan bayangan (shadow) pada element HTML, pengaturan teks, bahkan bisa membuat menu. Akan tetapi halaman web yang menarik bukan sepenuhnya peran dari CSS, namu dipadukan juga dengan Javascript/Jquery untuk mendapatkan efek – efek yang luar biasa.
    Hampir semua halaman turut web melibatkan CSS, oleh karena itu pemahaman terhadap CSS sangat dibutuhkan.

    Selektor Pada CSS

    Pelajaran dasar yang perlu kamu ketahui adalah selektor. Selektor berguna untuk memilih element – element yang menjadi target untuk kamu atur dengan efek tertentu. Sebagai Contoh,
    div{background:#000};
    diatas adalah contoh selektor yang menyatakan “elemen div akan diberikan background hitam (#000)”.
    Berikut adalah beberapa selektor pada CSS

    Selektor Keterangan
    #namaID Memilih Elemen yang nilai atribut yang ID-nya berupa “namaID”, contoh lain “#menu” untuk memilih elemen yang ID-nya “menu”
    .namaClass Memilih Elemen yang nilai atribut yang Class-nya berupa “namaClass”, contoh lain “.box” untuk memilih elemen yang memilik Class “box”
    namaElement Memilih Elemen yang nama elementnya adalah “namaElement”, contoh lain “table” untuk memilih element “table”
    namaElement namaKeturunannya Memilih Elemen “elementKeturunan” yang merupakan keturunan dari “namaElement”, contoh lain “table tr” untuk memilih element “tr” yang berada dalam element “table”
    namaElement > elementAnak Memilih Elemen “elementAnak” yang merupakan anak dari element “namaElement”, contoh lain “table > tr” untuk memilih “tr” yang merupakan anak dari “table”
    elementA + elementB Memilih Elemen “elementB” yang terletak tepat setelah “elemenA”
    selektorA, selektorB Memilih “selektorA” dan “selektorB”, contoh lain “#menu, .#submenu, .list” artinya memilih “#menu”, “#submenu”, dan “.list” sekaligus
    selektorA:first-child Memilih elemen dengan selektor “selektorA” yang merupakan anak pertama, contoh lain “tr td:first-child” artinya memilih elemen “td” yang pertama didalam elemen “tr”
    selektorA:last-child Memilih elemen dengan selektor “selektorA” yang merupakan anak terakhir, contoh lain “tr td:first-child” artinya memilih elemen “td” yang terakhir didalam elemen “tr”
    selektorA:nth-child(x) Memilih elemen dengan selektor “selektorA” yang merupakan anak ke-X, contoh lain “tr td:nth-child(2)” artinya memilih elemen “td” yang ke-2 didalam elemen “tr”, nilai didalam kurung dapat di ganti [even=untuk nilai genap][odd=untuk nilai ganjil][angka = untuk nilai yang ditentukan]
    namaElement[atrib] Memilih “namaElement” yang memiliki atribut “atrib”, contoh lain “input[type]” artinya memilih element “input” yang memiliki atribut “type”
    namaElement[atrib=”x”] Memilih “namaElement” yang memiliki atribut “atrib” dengan nilai “x”, contoh lain ‘input[type=”text”]’ artinya memilih element “input” yang memiliki atribut “type” dengan nilai “text”
    namaElement[atrib^=”x”] Memilih “namaElement” yang memiliki atribut “atrib” dengan nilai diawali oleh “x”, contoh lain ‘input[type=”te”]’ artinya memilih element “input” yang memiliki atribut “type” dengan nilai diawali oleh “te”
    namaElement[atrib$=”x”] Memilih “namaElement” yang memiliki atribut “atrib” dengan nilai diakhiri”x”, contoh lain ‘input[type=”xt”]’ artinya memilih element “input” yang memiliki atribut “type” dengan nilai diakhiri dengan “xt”

    Cara Penulisan Script  CSS (Cascading Style Sheets)

    Akan penulis jelaskan tata cara penulsan scrip CSS, sebagai contoh :
    .box {
    background:#000;
    color:#fff;
    }

    Script diatas menyatakan bahwa semua elemen yang ber-kelas “box” akan memilik background (latar belakang) hitam “#000” dan “color” diwarnai dengan putih “#FFF”. Untuk penjelasan secara visual lihat gambar berikut,

    Meletakkan Script CSS

    Untuk meletakkan script css ini bisa dimana saja, ada 3 opsi yaitu, langsung di dalam element/tag html, di dalam tag , bahkan bisa di file yang terpisah.

    1. Peletakkan Script CSS di dalam Tag HTML

    Script CSS bisa langsung ditulis di tag html, sebagai contoh

    Contoh Memasukkan CSS di dalam tag html

     

    2. Peletakkan Script CSS di dalam Tag Head

    Script CSS juga bisa ditulis di tag head, sebagai contoh

    .contoh {
    background:#333;
    color:#fff; 
    padding:10px; 
    width:200px;
    }

    Contoh menulis script css di tag head

     

    3. Penulisan Script CSS di File Terpisah

    Untuk membuat file terpisah antara HTML dan CSS kita harus membuat file .css setelah itu dimasukkan ke dalam file html, sebagai contoh
    file style.css
    background:#333;
    color:#fff; 
    padding:10px; 
    width:200px;  s

    file contoh.html

    Contoh menulis script css dalam file yang terpisah

    Membuat Menu Dropdown Horizontal Simple Menggunakan CSS

    Apa Itu Menu Dropdown ?

    Apa sih menu dropdown itu ? Menu dropdown adalah menu yang jika kita mengarahkan cursor dapat memunculkan submenu dari menu utama tersebut. Misal kita memiliki menu “Program Keahlian”, nah di dalam menu tersebut terdapat submenu, misalnya “Teknik Komputer & Jaringan”, maka apabila kita mengarahkan kursor ke menu “Program Keahlian” maka akan muncul Submenu “Teknik Komputer & Jaringan”.
    Menu Dropdown ada dua jenis yaitu, horizontal dan vertikal. Dropdown Horizontal adalah menu dropdown yang menjulur kebawah, sedangkan menu dropdown vertikal adalah menu yang muncul di samping menu utama.

    Cara Membuat Menu Dropdown Horizontal 

     Untuk membuat menu dropdown ikuti langkah – langkah berikut ini
    script html
       

           

  • Home
  •        

  • Program Keahlian
  •            

                   

  • Teknik Komputer Dan Jaringan
  •                

  • Teknik Audio Video
  •                

  • Teknik Pemesinan
  •                

  • Teknik Instalasi Tenaga Ringan
  •                

  • Teknik Kendaraan Ringan
  •                

  • Teknik Sepeda Motor
  •            
           
           

  • Ekstrakulikuler
  •        

  • About
  •        

  • Contact Us
  •    

    Perhatikan pada 

    script css
    .menu {

        font-family:arial;
        font-weight:bold;
        width:980;
        background:linear-gradient(top, #333, #222);
        background:-webkit-linear-gradient(top, #333, #222);
        background:-moz-linear-gradient(top, #333, #222);
        border-radius:5px;
        font-size:14px;
    }
    .menu ul {
        padding:0;
        margin:0;
    }
    .menu ul li {
        list-style:none;
        display:inline-block;
    }
    .menu ul li a {
        display:block;
        text-decoration:none;
        padding:20px;
        color:#ddd;
    }
    .menu ul li a:hover {
        background:linear-gradient(top, #222, #333);
        background:-webkit-linear-gradient(top, #222, #333);
        background:-moz-linear-gradient(top, #222, #333);
        color:#fff;
    }
    .menu ul li .submenu {
        display:none;
    }
    .menu ul li:hover .submenu {
        display:block;
        position:absolute;
        background:linear-gradient(top, #333, #111);
        background:-webkit-linear-gradient(top, #333, #111);
        background:-moz-linear-gradient(top, #333, #111);
        padding:10px;
    }
    .menu ul li:hover .submenu li {
        display:block;
    }
    .menu ul li:hover .submenu li a{
        padding:10px;
        border-radius:5px;
        margin-bottom:5px;
    }
    .menu ul li:hover .submenu li a:hover {
        background:#222;
        box-shadow:inset 0px 0px 5px #000;
    }

    Penjelasan

    • .menu ul li {list-style:none;  display:inline-block;} , script tersebut berfungsi untuk membuat list “
    • ” menjadi berderet.  
    • Coba perhatikan script .menu ul li .submenu{display:none} , display none berfungsi untuk menyembunyikan objek, jadi submenu di atas di sembunyikan. 
    • Lalu apa yang membuat submenu itu muncul ketika mouse di arahkan ke menu utama ?  Coba anda perhatikan .menu ul li:hover .submenu {display:block;} , ini adalah inti dari semuanya, li:hover berfungsi jika element “li” di sentuh maka .submenu yang tadi nya display:none; menjadi display:block;, itulah yang membuat submenu muncul ketika menu utama disentuh.