Question

我想将Twitter Bootstrap tooltip styles替换为popover styles。我怎么能这样做？

默认情况下，工具提示看起来像这样：

Tooltip

默认情况下，弹出窗口看起来像这样：

enter image description here

我希望我的工具提示是白色的，带有灰色边框，就像弹出窗口一样。

你能帮忙吗？

Answer 1

如果要更改工具提示本身的样式，则必须在bootstrap的css文件中编辑.tooltip-inner类，或者使用自己的类覆盖.tooltip-inner类。

边界的一个例子是：

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

Answer 2

以下是我开始工作的方式：

添加到variables.less

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

添加到自定义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 3

JQuery UI正在干扰bootstrap。

它们彼此之间并不相互兼容，因为它们在许多功能上重叠。

几个星期前我遇到了这个问题并找到了这个页面但是我并不想开始添加自定义css用于应该“正常工作”的内容。今天删除JQuery UI后（出于其他原因）我注意到工具提示开始按预期进行查找。我知道这是一个老问题，但几周前我会发现这个答案很有用。

Answer 4

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

});

简单 HTML

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

Answer 5

以下是右侧工具提示对我有用的内容。

我刚拿了一个与箭头大小相同的CSS三角形，然后将它从Bootstrap三角形拉开与边框宽度相同的距离。根据需要进行调整，你可以参考这篇很棒的文章，参考如何使三角形指向任何方向：

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 6

由于最佳答案隐藏在对问题的评论中，并且一开始并不可见，所以我最终找到了解决方案。在我的情况下，最简单的方法是使用popover而不是工具提示，并在悬停事件中触发它。为此，您有两个选择：

您可以使用属性'data-trigger'：

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

或在弹出窗口初始化时使用选项'trigger'：

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

如何使Twitter Bootstrap工具提示看起来像弹出窗口（没有标题行）？

6 个答案: