具有工具提示时,Bootstrap按钮组会出现故障

时间:2013-08-07 11:01:17

标签: twitter-bootstrap

我有一个组按钮,每个按钮都启用了工具提示。 将鼠标悬停在组的最后一个按钮上时,工具提示会导致未对齐,并且按钮的边框不再呈圆形。我知道工具提示样式覆盖了按钮样式,但我无法找到它的位置。

DEMO:Bootply

更新:

通过使用<a>元素更改<button>元素然后使用自定义样式来修复

按钮:

<button class="btn btn-small btn-danger" data-toggle="modal" title="Unlink" data-target="#@item.WOWorkPermitID"><i class="icon-resize-full icon-white"></i></button>

CSS:

.btn-group > .btn:last-of-type {
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

DEMO - &gt; Bootply

相关帖子 - &gt; twitter bootstrap tooltips over buttons inside table not displaying correctly

2 个答案:

答案 0 :(得分:1)

尝试

 $(".btn").tooltip({     
    'placement': 'top',
    container: 'body'  
 });

它对我有用:)

答案 1 :(得分:0)

最后一项不是按钮,它是一个锚点。尝试将其更改为前两个项目的按钮。