Jak utworzyć etykietki narzędzi Bootstrap na Twitterze tak, aby wyglądały jak popover (bez linii tytułowej)?

Question

Chciałbym wymienić Twitter Bootstrap tooltip styles na popover styles. Jak mogę to zrobić?

podpowiedzi wyglądać domyślnie:

Popovers wyglądać domyślnie:

Chciałbym moje podpowiedzi być biały, z szarą obwódką , podobnie jak popover.

Czy możesz pomóc?

Answer 1

Oto jak mam go do pracy:

Dodaj do variables.less

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

Dodaj do niestandardowego pliku MNIEJ

// 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

Jeśli chcesz zmienić styl samej podpowiedzi, musisz edytować klasę .tooltip-inner w pliku css programu bootstrap lub zastąpić klasę .tooltip-inner klasą własną.

Przykładem granicy byłoby:

.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); 

}); 

i prosty HTML

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

Answer 4

Oto co pracował dla mnie na etykietce po prawej stronie.

Właśnie wziąłem trójkąt CSS o takim samym rozmiarze jak strzała, a następnie odciągnąłem go od trójkąta Bootstrap o tę samą odległość co szerokość obramowania. Dostosować w zależności od potrzeb, można odwołać się do tej wspaniałej artykule dla odniesienia na jak zrobić Trójkąt skierowany w dowolnym kierunku:

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 zakłóca startowej.

Nie są ze sobą kompatybilne, ponieważ nakładają się na siebie z dużą funkcjonalnością.

Miałem ten problem kilka tygodni temu i znalazłem tę stronę, ale nie chciałem zaczynać dodawania niestandardowego css dla czegoś, co powinno "po prostu zadziałać". Po usunięciu interfejsu JQuery dzisiaj (z innego powodu) zauważyłem, że wskazówki na temat narzędzi zaczęły wyglądać zgodnie z zamierzeniami. Wiem, że to stare pytanie, ale ta odpowiedź byłaby przydatna kilka tygodni temu.

Answer 6

Ponieważ najlepsza odpowiedź była ukryta w komentarzach do pytania i na początku była niewidoczna, sam znalazłem rozwiązanie.Najłatwiej było w moim przypadku użyć popover zamiast tooltip z wyzwalaniem go na zdarzeniu hover. Aby to zrobić, że masz 2 opcje:

Można użyć atrybutu 'data-spust':

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

lub skorzystać z opcji 'wyzwalania' w inicjalizacji popover:

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