Làm thế nào để bạn thay đổi chiều rộng và chiều cao của chú giải công cụ Twitter Bootstrap?

Tôi đã tạo một tooltip bằng Twitter Bootstrap.

Chú giải công cụ được hiển thị với ba dòng. Tuy nhiên, tôi muốn hiển thị chú giải công cụ chỉ với một dòng.

Làm cách nào để thay đổi độ rộng của tooltip? Đây có phải là cụ thể cho Twitter Bootstrap hoặc để tự công cụ?

Chỉ cần ghi đè bootstrap.css

Giá trị mặc định trong BS2 là max-width: 200px; Vì vậy, bạn có thể tăng nó với bất cứ điều gì phù hợp với nhu cầu của bạn.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

Trên BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

Tôi nhận ra đây là một câu hỏi rất cũ, nhưng nếu tôi hạ cánh ở đây, thì những người khác cũng vậy. Vì vậy, tôi hình dung tôi cân nhắc.

Nếu bạn muốn tooltip chỉ phản hồi với một dòng bất kể bạn thêm bao nhiêu nội dung vào nó, chiều rộng phải linh hoạt. Tuy nhiên, Bootstrap khởi tạo tooltip theo chiều rộng, do đó, bạn ít nhất phải khai báo chiều rộng đó sẽ là bao nhiêu và làm cho nó linh hoạt từ kích thước đó trở lên. Đây là những gì tôi khuyên bạn nên:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

Các min-widthtuyên bố một kích thước bắt đầu. Trái ngược với chiều rộng tối đa, như một số người khác sẽ đề xuất, nó tuyên bố dừng lại chiều rộng . Theo câu hỏi của bạn, bạn không nên khai báo chiều rộng cuối cùng hoặc nội dung chú giải công cụ của bạn cuối cùng sẽ bao bọc tại điểm đó. Thay vào đó, bạn sử dụng chiều rộng vô hạn hoặc chiều rộng linh hoạt. max-width: 100%;sẽ đảm bảo rằng một khi tooltip đã bắt đầu ở độ rộng 100px, nó sẽ phát triển và điều chỉnh theo nội dung của bạn bất kể lượng nội dung bạn có trong đó.

GHI NHỚ Tooltips không có ý định mang nhiều nội dung. Nó có thể trông thú vị nếu bạn có một chuỗi dài trên toàn bộ màn hình. Và nó chắc chắn sẽ có tác động trong các chế độ xem phản hồi của bạn, đặc biệt là điện thoại thông minh (chiều rộng 320px).

Tôi muốn giới thiệu hai giải pháp để hoàn thiện điều này:

1. Giữ nội dung chú giải công cụ của bạn ở mức tối thiểu để không vượt quá chiều rộng 320px. Và ngay cả khi bạn làm điều này, bạn phải nhớ nếu bạn có chú giải công cụ được đặt ở bên phải màn hình và vớidata-placement:right , nội dung chú giải công cụ của bạn sẽ không hiển thị trong điện thoại thông minh (do đó tại sao bootstrap ban đầu thiết kế chúng để đáp ứng với nội dung của nó và cho phép nó bọc)
2. Nếu bạn không thích sử dụng khái niệm tooltip một dòng này, thì hãy bao quát sáu bằng cách sử dụng @mediatruy vấn để đặt lại tooltip của bạn để phù hợp với chế độ xem trên điện thoại thông minh. Như thế này:

Bản demo của tôi TẠI ĐÂY thể hiện tính linh hoạt và khả năng phản hồi trên các chú giải công cụ theo kích thước nội dung và kích thước hiển thị của thiết bị.

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

Bạn nên ghi đè lên các thuộc tính bằng css của riêng bạn. như vậy

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

bộ chọn chọn div mà tooltip được giữ (tooltip được thêm vào bởi javascript và nó thường không thuộc về bất kỳ container nào.

Xác định chiều rộng tối đa với "quan trọng!" và sử dụng data-container = "body"

Tệp CSS

.tooltip-inner {
    max-width: 500px !important;
}

Thẻ HTML

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

Tập lệnh JS

$('.tooltiplink').tooltip();

Để khắc phục vấn đề chiều rộng, thay vào đó hãy sử dụng mã sau đây.

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

ví dụ: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip- thong/

Giải pháp khác; tạo một lớp mới (ví dụ: toàn bộ công cụ) trong CSS:

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

Sử dụng lớp này trên các phần tử mà bạn muốn chú giải công cụ rộng:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

Bootstrap tooltip tạo đánh dấu bên dưới phần tử chứa tooltip, vì vậy HTML thực sự trông giống như thế này sau khi đánh dấu được tạo:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

CSS sử dụng điều này để truy cập phần tử liền kề (+) đến .tooltip-wide và từ đó điều hướng đến .tooltip-bên trong, trước khi áp dụng thuộc tính độ rộng tối đa. Điều này sẽ chỉ ảnh hưởng đến các phần tử sử dụng lớp .tooltip, tất cả các chú giải công cụ khác sẽ không bị thay đổi.

Bạn có thể chỉnh sửa lớp css .tooltip bên trong trong bootstrap.css. Độ rộng tối đa mặc định là 200px. Bạn có thể thay đổi chiều rộng tối đa thành kích thước mong muốn của bạn.

Sau một số thử nghiệm, điều này làm việc tốt nhất với tôi:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

Chỉ cần ghi đè mặc định max-widthcho bất cứ điều gì phù hợp với nhu cầu của bạn.

.tooltip-inner {
  max-width: 350px;
}

Khi chiều rộng tối đa không hoạt động (tùy chọn 1)

Nếu chiều rộng tối đa không hoạt động, bạn có thể sử dụng chiều rộng đã đặt thay thế. Điều này là tốt, nhưng chú giải công cụ của bạn sẽ không còn thay đổi kích thước để phù hợp với văn bản. Nếu bạn không thích điều đó, hãy bỏ qua tùy chọn 2.

.tooltip-inner {
  width: 350px;
}

Xử lý chính xác với các container nhỏ (tùy chọn 2)

Vì Bootstrap nối thêm tooltip như một người anh em của mục tiêu, nên nó bị ràng buộc bởi phần tử chứa. Nếu phần tử chứa nhỏ hơn của bạnmax-width , thìmax-width sẽ không hoạt động.

Vì vậy, khi max-widthkhông hoạt động, bạn chỉ cần thay đổi container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

Mẹo chuyên nghiệp: bộ chứa có thể là bất kỳ bộ chọn nào, thật tuyệt khi bạn chỉ muốn ghi đè kiểu trên một vài chú giải công cụ.

Đặt lớp thành div tooltip chính và cho tooltip bên trong

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

Vui lòng tham khảo bài viết dưới đây. Câu trả lời của cmcculloh làm việc cho tôi. https://stackoverflow.com/posts/31683500/edit

Như được gợi ý trong tài liệu , cách dễ nhất để đảm bảo rằng chú giải công cụ của bạn hoàn toàn không bao gồm là sử dụng

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

Với điều này, bạn không phải lo lắng về giá trị thứ nguyên hoặc bất cứ thứ gì tương tự. Vấn đề chính là nếu bạn có một dòng văn bản siêu dài thì nó sẽ tắt khỏi màn hình (như bạn có thể thấy trong ví dụ về JSBin ).

BS3:

.tooltip-inner { width:400px; max-width: 400px; }

Trên Bootstrap 4 và nếu bạn không muốn thay đổi tất cả chiều rộng của chú giải công cụ, bạn có thể sử dụng mẫu cụ thể cho chú giải công cụ bạn muốn:

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

Hãy thử mã này,

.tooltip-inner {
     max-width:350px !important;
}

Tôi đã có cùng một vấn đề, tuy nhiên tất cả các câu trả lời phổ biến - để thay đổi .tooltip-inner{width}cho nhiệm vụ của tôi không thực hiện đúng công việc. Đối với các chú giải công cụ khác (tức là ngắn hơn) chiều rộng cố định là quá lớn. Tôi đã lười biếng để viết các mẫu / lớp html riêng biệt cho hàng trăm chú giải công cụ, vì vậy tôi chỉ thay thế tất cả các khoảng trống giữa các từ bằng  trong mỗi dòng văn bản.

Tôi cần phải điều chỉnh độ rộng của một số chú giải công cụ. Nhưng không phải là một thiết lập tổng thể. Vì vậy, tôi đã kết thúc việc này:

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

Html

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

Thiết lập độ rộng tối đa của lớp tooltip-bên trong didn làm việc cho tôi , tôi xóa bằng cách sử dụng bootstrap 3.2

Một số cách thiết lập độ rộng tối đa chỉ hoạt động nếu bạn đặt độ rộng của lớp cha (.tooltip).

Nhưng sau đó tất cả các chú giải công cụ trở thành kích thước bạn chỉ định. Vì vậy, đây là giải pháp của tôi:

thêm một chiều rộng cho lớp cha:

.tooltip {
  width:400px;
}

Sau đó, bạn thêm chiều rộng tối đa và thay đổi hiển thị thành khối nội tuyến, vì vậy nó sẽ không chiếm toàn bộ không gian

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

Của tôi trong đó tất cả các độ dài thay đổi và chiều rộng tối đa đã đặt sẽ không hoạt động đối với tôi, vì vậy, cài đặt css của tôi thành 100% như một bùa mê.

.tooltip-inner {
    max-width: 100%;
}

Với Bootstrap 4 tôi sử dụng

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

trong bootstrap 3.0.3, bạn có thể làm điều đó bằng cách sửa đổi lớp popover

.popover {
    min-width: 200px;
    max-width: 400px;
}