Chú giải công cụ khởi động cần phải ở một dòng

Question

Tôi đã tạo một chú giải công cụ bằng cách sử dụng bootstrap để điều khiển thả xuống. Nó hiển thị chú giải công cụ. Nhưng vì điều khiển này được gắn bên trong văn bản chú giải class="col-sm-4" được chia nhỏ thành các dòng mới. Nhưng tôi mong đợi để hiển thị điều này trong một dòng duy nhất. Bất kỳ ý tưởng để làm điều này?

<div class="col-sm-4"> 
       <select class="form-control" id="ddlSchoolAttended" data-toggle="tooltip" data-placement="right" title="Some tooltip 2!Some tooltip 2!Some "> 
      <option value="08">08 -Year 8 or below</option> 
    <option value="09">09 -Year 9 or equivalent</option> 
    <option value="10">10 -Completed Year 10</option> 
    <option value="11">11 -Completed Year 11</option> 
    <option value="12">12 -Completed Year 12</option> 
    <option selected="selected" value="">--Not Specified--</option> 
      </select><br/> 
</div> 

Answer 1

.tooltip-inner { 
    white-space:nowrap; 
    max-width:none; 
} 

Thêm phần này vào CSS của bạn sau khi Bootstrap CSS. Tuy nhiên, bằng cách sử dụng di chuột sang phải, ngay cả ô tô phải, sẽ tắt màn hình trên các chế độ xem nhỏ hơn, nhưng vì các chế độ xem nhỏ hơn thường chạm, các máy di động có thể làm điều này yêu cầu nhấn đúp để hoạt động. Tôi thường sử dụng tập lệnh để phát hiện cảm ứng cho iOS, Android và Windows trên thiết bị di động và sau đó chỉ sử dụng chú giải công cụ trên thiết bị không chạm, vì vậy điều này không ảnh hưởng đến các vòi người dùng.

Answer 2

Mặc dù câu trả lời của Christina hoạt động, nó chỉ khắc phục được sự cố và có thể tạo ra các vấn đề khác ở mọi nơi. Trong tài liệu bootstrap nó được đề cập này:

Tooltips trong nhóm nút, nhóm đầu vào, và bảng yêu cầu đặc biệt thiết Khi sử dụng chú giải công cụ trên các yếu tố trong một .btn nhóm hoặc một .input nhóm, hoặc trên bàn các yếu tố có liên quan, bạn sẽ phải chỉ định tùy chọn container: 'body' để tránh các tác dụng phụ không mong muốn (chẳng hạn như phần tử ngày càng lớn hơn và/hoặc mất các góc tròn khi chú giải công cụ được kích hoạt).

thấy Bootstrap docs

vì vậy tất cả bạn cần làm là thêm container: 'body' như vậy:

$(function() { 
    $('[data-toggle="tooltip"]').tooltip({container: 'body'})} 
); 

hy vọng điều này giúp