Chú giải công cụ html

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

Tooltip primary
Tooltip success
Tooltip info
Tooltip warning
Tooltip danger


Custom tooltip
Another custom tooltip

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. Call library Bootstrap

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