Làm cách nào để tạo chú thích công cụ Twitter Bootstrap giống như các cửa sổ bật lên (không có dòng tiêu đề)?

Question

Tôi muốn thay thế Twitter Bootstrap tooltip styles bằng popover styles. Làm thế nào tôi có thể làm điều đó?

Tooltips trông như thế này theo mặc định:

Popovers trông như thế này theo mặc định:

Tôi muốn tooltips của tôi để có màu trắng, với một đường viền màu xám , giống như các cửa sổ bật lên.

Bạn có thể trợ giúp không?

Answer 1

Đây là cách tôi đã nhận nó để làm việc:

Thêm vào variables.less

@tooltipArrowOuterWidth: @tooltipArrowWidth + 1; 
@tooltipArrowOuterColor: rgba(0,0,0,.25); 

Thêm vào tập tin tùy chỉnh LESS

// Tooltip 
// -------------------------------------------------- 
.tooltip.in { .opacity(100); } 

.tooltip-inner { 
    background:@popoverTitleBackground; 
    color:@gray; 
} 
.tooltip .arrow { 
    border-width: @tooltipArrowOuterWidth; 
} 


.tooltip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: @zindexPopover; 
    display: none; 
    max-width: 276px; 
    padding: 1px; 
    text-align: left; // Reset given new insertion method 
    background-color: @popoverBackground; 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
      background-clip: padding-box; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,.2); 
    .border-radius(6px); 
    .box-shadow(0 5px 10px rgba(0,0,0,.2)); 

    // Overrides for proper insertion 
    white-space: normal; 

    // Offset the popover to account for the popover arrow 
    &.top  { margin-top: -10px; } 
    &.right { margin-left: 10px; } 
    &.bottom { margin-top: 10px; } 
    &.left { margin-left: -10px; } 
} 

.tooltip-inner { 
    margin: 0; // reset heading margin 
    padding: 4px 8px; 
    font-size: @baseFontSize * 0.9; 
    font-weight: normal; 
    line-height: 18px; 
    background-color: @popoverTitleBackground; 
    border-bottom: 1px solid darken(@popoverTitleBackground, 5%); 
    .border-radius(5px 5px 0 0); 

    &:empty { 
    display: none; 
    } 
} 

// Arrows 
// 
// .arrow is outer, .arrow:after is inner 

.tooltip .tooltip-arrow, 
.tooltip .tooltip-arrow:after { 
    position: absolute; 
    display: block; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
} 
.tooltip .tooltip-arrow { 
    border-width: @tooltipArrowOuterWidth; 
} 
.tooltip .tooltip-arrow:after { 
    border-width: @tooltipArrowWidth; 
    content: ""; 
} 

.tooltip { 
    &.top .tooltip-arrow { 
    left: 50%; 
    margin-left: -@tooltipArrowOuterWidth; 
    border-bottom-width: 0; 
    border-top-color: #999; // IE8 fallback 
    border-top-color: @popoverArrowOuterColor; 
    bottom: -@tooltipArrowOuterWidth; 
    &:after { 
     bottom: 1px; 
     margin-left: -@tooltipArrowWidth; 
     border-bottom-width: 0; 
     border-top-color: @tooltipArrowColor; 
    } 
    } 
    &.right .tooltip-arrow { 
    top: 50%; 
    left: -@tooltipArrowOuterWidth; 
    margin-top: -@tooltipArrowOuterWidth; 
    border-left-width: 0; 
    border-right-color: #999; // IE8 fallback 
    border-right-color: @tooltipArrowOuterColor; 
    &:after { 
     left: 1px; 
     bottom: -@tooltipArrowWidth; 
     border-left-width: 0; 
     border-right-color: @tooltipArrowColor; 
    } 
    } 
    &.bottom .tooltip-arrow { 
    left: 50%; 
    margin-left: -@tooltipArrowOuterWidth; 
    border-top-width: 0; 
    border-bottom-color: #999; // IE8 fallback 
    border-bottom-color: @tooltipArrowOuterColor; 
    top: -@tooltipArrowOuterWidth; 
    &:after { 
     top: 1px; 
     margin-left: -@tooltipArrowWidth; 
     border-top-width: 0; 
     border-bottom-color: @tooltipArrowColor; 
    } 
    } 

    &.left .tooltip-arrow { 
    top: 50%; 
    right: -@tooltipArrowOuterWidth; 
    margin-top: -@tooltipArrowOuterWidth; 
    border-right-width: 0; 
    border-left-color: #999; // IE8 fallback 
    border-left-color: @tooltipArrowOuterColor; 
    &:after { 
     right: 1px; 
     border-right-width: 0; 
     border-left-color: @tooltipArrowColor; 
     bottom: -@tooltipArrowWidth; 
    } 
    } 

} 

Answer 2

Nếu bạn muốn thay đổi kiểu cho chú giải công cụ, bạn sẽ phải chỉnh sửa lớp .tooltip-inner trong tệp css của bootstrap hoặc ghi đè lên lớp .tooltip-inner với một lớp của riêng bạn.

Một ví dụ cho biên giới sẽ là:

.tooltip-inner { 
    border: solid 1px #ccc; 
} 

Answer 3

JS

$(function() { 
    $('[title]').attr("data-rel", "tooltip"); 
    $("[data-rel='tooltip']") 
     .attr("data-placement", "top") 
     .attr("data-content", function() { 
      return $(this).attr("title") 
     }) 
     .removeAttr('title'); 


    var showPopover = function() { 
     $(this).popover('show'); 
    }; 
    var hidePopover = function() { 
     $(this).popover('hide'); 
    }; 
    $("[data-rel='tooltip']").popover({ 
     trigger: 'manual' 
    }).click(showPopover).hover(showPopover, hidePopover); 

}); 

Và đơn giản HTML

<h1 title="This is title">What is this</h1> 

Answer 4

Đây là những gì làm việc cho tôi trên một tooltip bên cánh phải.

Tôi vừa chụp một hình tam giác CSS có cùng kích thước với mũi tên, sau đó kéo nó ra khỏi tam giác Bootstrap bằng khoảng cách tương tự như chiều rộng của đường viền. Thích ứng khi cần thiết, và bạn có thể tham khảo bài viết này awesome để tham khảo về cách làm cho một trỏ tam giác theo hướng nào:

http://css-tricks.com/snippets/css/css-triangle/

.tooltip .tooltip-inner { 
    background: white; 
    color: black; 
    border: 3px solid black; 
    padding: 10px; 
    line-height: 1.65em; 
} 
.tooltip.right .tooltip-arrow { 
    top: 50%; 
    left: 0; 
    margin-top: -15px; 
    border-right-color: white; 
    border-width: 15px 15px 15px 0; 
} 
.tooltip.right .tooltip-arrow:after { 
    content: " "; 
    position: absolute; 
    z-index: -1; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 15px solid black; 
    top: -15px; 
    left: -3px; 
} 

Answer 5

JQuery UI được can thiệp vào bootstrap.

Chúng không thực sự tương thích với nhau khi chúng chồng lên nhau trong nhiều chức năng.

Tôi đã gặp sự cố này vài tuần trước và đã tìm thấy trang này nhưng tôi không muốn bắt đầu thêm css tùy chỉnh cho nội dung nào đó 'nên hoạt động'. Sau khi xóa giao diện người dùng JQuery hôm nay (vì một lý do khác), tôi nhận thấy các mẹo công cụ bắt đầu trông như dự định. Tôi biết đây là một câu hỏi cũ nhưng tôi đã tìm thấy câu trả lời này hữu ích một vài tuần trước đây.

Answer 6

Vì câu trả lời hay nhất là ẩn trong các nhận xét cho câu hỏi và không hiển thị lúc đầu, tôi đã tự mình tìm ra giải pháp.Đó là cách dễ nhất trong trường hợp của tôi để sử dụng popover thay vì tooltip với kích hoạt nó trên sự kiện di chuột. Để làm điều đó bạn có 2 lựa chọn:

Bạn có thể sử dụng thuộc tính 'dữ liệu kích hoạt':

<td id="3" data-content="Tooltip text" data-placement="bottom" data- container="body" data-trigger="hover" data-original-title="" title="">This tooltiped</span></td> 

hoặc sử dụng tùy chọn 'kích hoạt' trên popover khởi:

$('.payment').popover({ 
    trigger: "hover", 
})