Tất cả bài viết | Bootstrap

Hướng dẫn cách tùy biến màu Bootstrap Tooltip

Làm thế nào để chèn tooltip bằng Bootstrap? làm thế nào để tùy chỉnh màu cho Boostrap tooltip?

Bước 1: Tạo cấu trúc HTML

 
 Hướng dẫn cách tùy biến màu Bootstrap Tooltip
  
  Tooltip tĩnh 
   
    
     
    Tooltip primary example 
    
    
     
    Tooltip success example 
    
    
     
    Tooltip info example 
   
    
     
    Tooltip warning example 
    
    
     
    Tooltip danger example 
   
   
   
    
     
    Custom tooltip example 
    
    
     
    Another custom tooltip example 
    
   
  
  
  Tooltip động

Bước 2: Tạo cấu trúc CSS

 
 
.tooltip-custom .tooltip-inner {    
background-color: #f2653c;  
}  

.tooltip-custom.top .tooltip-arrow {    
border-top-color: #f2653c;  
}  

.tooltip-custom.right .tooltip-arrow {    
border-right-color: #f2653c;  
}  

.tooltip-custom.left .tooltip-arrow {    
border-left-color: #f2653c;  
}  

.tooltip-custom.bottom .tooltip-arrow {    
border-bottom-color: #f2653c;  
}
  

.tooltip-custom-alt .tooltip-inner {    
background-color: #5b2da3;  
}  

.tooltip-custom-alt.top .tooltip-arrow {    
border-top-color: #5b2da3;  
}  

.tooltip-custom-alt.right .tooltip-arrow {    
border-right-color: #5b2da3;  
}  

.tooltip-custom-alt.left .tooltip-arrow {    
border-left-color: #5b2da3;  
}  

.tooltip-custom-alt.bottom .tooltip-arrow {    
border-bottom-color: #5b2da3;  
}
  

.bs-example {    
position: relative;    
margin: 15px;    
padding: 15px 15px 25px;    
border: 1px solid #ddd;    
border-radius: 4px 4px 0 0;  
}  

.bs-example .btn {    
margin: 5px;  
}
  

.bs-example__title {    
margin-bottom: 20px;    
}
  

.bs-example--static .tooltip {    
position: relative;    
display: inline-block;    
margin: 10px 20px;    
opacity: 1;  
}

Bước 3: Gọi thư viện Bootstrap

Bước 5: Gọi thư viện JQUERY và tùy biến màu Tooltip

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất