by Anggie Bratadinata

Membuat Tooltip dengan CSS

Dalam artikel ini saya bahas cara cepat bikin tooltip dengan CSS (SCSS), tanpa JavaScript. Di sini saya bikin tooltip yang tampil di atas dan di samping elemen parent-nya. Saya mulai dari struktur HTML & CSS dasarnya dulu:

Jadi kelas utamanya .tooltip & untuk ngatur posisinya ada kelas .top untuk tampilan tooltip di atas & kelas .right untuk tampilan di samping kanan.

Bukan tooltip namanya kalo nggak ada pointer segitiganya. Caranya saya kopas aja dari sini: CSS Triangle.

Yang pertama, saya bikin tooltip tanpa border. Ini gampang sekali. Tinggal nempelin segitiga di bawah atau di samping. Untuk nampilin segitiga, saya pake pseudo-element :after.

Biar praktis, beberapa parameter yang nanti saya pake untuk nentuin warna dan ukuran saya jadiin variabel (ini enaknya pake CSS pre-processor semacam SCSS). 

.tooltip {
  
  $bgcolor : #eee;
  $triangleHeight: 6px;
  $triangleSide: 8px;

  display: none;
  background: $bgcolor;
  position: absolute;  
  padding: 8px;
  z-index: 1000;
  
  &.top{
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    
    &:after{
      content:'';
      position: absolute;
      bottom: -$triangleHeight;
      left: 50%;
      transform: translateX(-50%);
      /* bikin segitiga ngadep bawah */
      width: 0; 
      height: 0; 
      border-left: $triangleSide solid transparent;
      border-right: $triangleSide solid transparent;
      /* atur tinggi segitiga & warnanya */
      border-top: $triangleHeight solid $bgcolor;
      /* end segitiga */
    }
  }
  
  &.right{
    left: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%);
    
    &:after{
      content:'';
      position: absolute;  
      left: -$triangleHeight;
      /* bikin segitiga ngadep kiri */
      width: 0; 
      height: 0; 
      border-top: $triangleSide solid transparent;
      border-bottom: $triangleSide solid transparent;
      /* atur tinggi segitiga & warnanya */
      border-right: $triangleHeight solid $bgcolor;
      /* end segitiga */
    }
  }
  
}

Refactor dikit. Saya bikin deklarasi :after di luar .top & .right untuk ngurangi duplikasi kode.

.tooltip {
  
  $bgcolor : #eee;
  $triangleHeight: 6px;
  $triangleSide: 8px;

  display: none;
  background: $bgcolor;
  position: absolute;  
  padding: 8px;
  z-index: 1000;
  
  &:after {
    content:'';
    width: 0;
    height: 0;
    position: absolute;
  }
  
  &.top{
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    
    &:after{
      bottom: -$triangleHeight;
      left: 50%;
      transform: translateX(-50%);
      border-left: $triangleSide solid transparent;
      border-right: $triangleSide solid transparent;
      border-top: $triangleHeight solid $bgcolor;
    }
  }
  
  &.right{
    left: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%);
    
    &:after{     
      left: -$triangleHeight;
      border-top: $triangleSide solid transparent;
      border-bottom: $triangleSide solid transparent;
      border-right: $triangleHeight solid $bgcolor;
    }
  }
  
}

Hasilnya bisa diliat di bawah ini:

Tooltip dengan Border

Biasanya tooltip kalo ga pake border ga gitu keliatan. Umumnya tooltip yang pernah saya buat juga pake border, bahkan ada yang pake shadow juga. Jadi saya terusin ke versi berikutnya, “Tooltip dengan Border”. Pertama saya kasih border di kelas .tooltip, tapi border ini nggak mencakup segitiga pointernya.

Karena saya pake border di elemen :after untuk bikin segitiga saya ga bisa pake border lagi untuk bikin garis di sekeliling segitiganya. Triknya adalah bikin dua segitiga terus ditumpuk. Segitiga yang bawah, dibuat pake elemen :before, sedikit lebih besar daripada yang atas. Jadi pas ditumpuk yang bawah hanya kelihatan sedikit, seolah-olah jadi border untuk segitiga yang di atasnya.

Ilustrasinya begini:

.tooltip {
  
  $bgcolor : #eee;
  $borderColor: #aaa;
  $triangleHeight: 6px;
  $triangleSide: 8px;
  $triangleBorderHeight: 8px;
  $triangleBorderSide: 10px;

  display: none;
  background: $bgcolor;
  position: absolute;  
  padding: 8px;
  border: 1px solid $borderColor;
  z-index: 1000;  
  
  &:before, &:after{
    content:'';
    position: absolute;
    width: 0; 
    height: 0; 
  }
  
  &.top{
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    
    &:before, &:after{     
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* segitiga untuk border */
    &:before {
      bottom: -$triangleBorderHeight;
      border-left: $triangleBorderSide solid transparent;
      border-right: $triangleBorderSide solid transparent;
      border-top: $triangleBorderHeight solid $borderColor;
    }
    
    /* segitiga untuk pointer */
    &:after{      
      bottom: -$triangleHeight;      
      border-left: $triangleSide solid transparent;
      border-right: $triangleSide solid transparent;
      border-top: $triangleHeight solid $bgcolor;
    }
  }
  
  &.right{
    left: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%);
    
    &:before, &:after{         
      top: 50%;
      transform: translateY(-50%);
    }
    
    &:before{
      left: -$triangleBorderHeight;
      border-top: $triangleBorderSide solid transparent;
      border-bottom: $triangleBorderSide solid transparent;
      border-right: $triangleBorderHeight solid $borderColor;
    }
    
    &:after{      
      left: -$triangleHeight;
      border-top: $triangleSide solid transparent;
      border-bottom: $triangleSide solid transparent;
      border-right: $triangleHeight solid $bgcolor;
    }
  }
  
}

Kode lengkapnya ada di sini:

Sekian. Mudah-mudahan bermanfaat.

Also in this category ...