Twitter Bootstrap - làm thế nào để thêm một số lề giữa popup tooltip và phần tử

Question

Tôi chưa thử bất cứ điều gì vì tôi không thể hiểu được khoảng trống giữa tooltip và phần tử được tạo/thêm từ bootstrap, thông thường tooltip thực sự gần yếu tố kích hoạt sự kiện tooltip.

Tôi chỉ muốn đặt chú giải công cụ cách xa phần tử một chút, để thêm một số lợi nhuận khác từ chú giải công cụ và ý tôi.

Tôi muốn hiểu làm thế nào để làm điều này trong css nếu có thể và nếu có thể để làm cho nó cả cho đúng, left, top, tooltips đáy

Hope câu hỏi là rõ ràng.

Đây là cách tooltips trông vào ứng dụng của tôi:

và đây là những gì tôi muốn làm và làm thế nào nên họ chăm sóc

Answer 1

Đây là CSS mặc định cho một tooltip trên đầu trang :

.tooltip.top { 
    padding: 5px 0; 
    margin-top: -3px; 
} 

bạn có thể ghi đè lên nó trong CSS của riêng bạn:

.tooltip.top { 
    margin-top: -10px; 
} 

Lưu ý mã này sẽ chỉ làm việc làm việc một tooltip trên đầu trang, bạn sẽ Nedd để thích ứng với CSS cho 3 hướng khác:

.tooltip.top { margin-top: -10px; } 
.tooltip.right { margin-left: 10px; } 
.tooltip.bottom { margin-top: 10px; } 
.tooltip.left { margin-left: -10px; } 

Answer 2

Trong bootstrap.css bạn sẽ tìm thấy mã này:

.tooltip.top { 
    padding: 5px 0; 
    margin-top: -3px; 
} 

.tooltip.right { 
    padding: 0 5px; 
    margin-left: 3px; 
} 

.tooltip.bottom { 
    padding: 5px 0; 
    margin-top: 3px; 
} 

.tooltip.left { 
    padding: 0 5px; 
    margin-left: -3px; 
} 

Thay đổi hoặc ghi đè lề để thay đổi khoảng cách của chú giải công cụ từ các phần tử được di chuột qua.

I.E. Để thiết lập khoảng cách lớn hơn cho vị trí hàng đầu của tooltip, thiết .tooltip.top lớp như thế này:

.tooltip.top { 
    padding: 5px 0; 
    margin-top: -70px; 
}