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

Question

我想用popover 样式替换Twitter Bootstrap 工具提示样式。我怎样才能做到这一点？

默认情况下，工具提示如下所示：

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

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

你能帮我吗？

Answer 1

如果要更改工具提示本身的样式，则必须编辑.tooltip-inner引导程序的 css 文件中的类或.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 正在干扰引导程序。

它们彼此并不真正兼容，因为它们在许多功能上重叠。

几周前我遇到了这个问题并找到了这个页面，但我不想开始为应该“正常工作”的东西添加自定义 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

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

您可以使用属性“数据触发器”：

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

或在弹出框初始化时使用选项“触发器”：

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