表格内按钮上的 twitter 引导工具提示未正确显示 [英] twitter bootstrap tooltips over buttons inside table not displaying correctly

问题描述

我正在尝试使用 twitter 引导程序在表格内显示带有工具提示的按钮.

I'm trying to show buttons with tooltips inside a table, using twitter bootstrap.

问题是工具提示在按钮之间插入了额外的空间，最后一个按钮不再有圆角.如何解决这个问题?

The problem is that the tooltips inserts additional space between buttons, and the last button doesn't have the rounded corners anymore. How can this be fixed?

另一个问题是，如果按钮打开一个模态对话框，在关闭它时按钮会获得焦点并再次显示工具提示.

Another problem is that if the button is opening a modal dialog, upon closing it the button gets the focus and the tooltip is shown again.

按钮是由 ajax 请求创建的，所以这里是我初始化工具提示的方法:

The buttons are created by ajax requests, so here's how I initialize the tooltips:

$('body').tooltip({
selector: '[rel=tooltip]:not(.disabled)',
live: true,
container: 'body'

});

这是它的 jsfiddle:http://jsfiddle.net/danut007ro/y8vNr/

Here is the jsfiddle for it: http://jsfiddle.net/danut007ro/y8vNr/

推荐答案

问题是这样的:

.btn-group>.btn+.btn {
margin-left: -1px;
}

有一个边框，您可以使用 -1 边距来隐藏 oen 侧，使其看起来像一条边框线.如果您想停止跳跃，请删除该规则，但是您会在按钮之间看到两条边界线.

There is a border and your using -1 margin to hide oen side to make it look a single border line. If you want to stop jumping, then remove that rule, but then you'll see two border lines between buttons.

一个真正的解决方法是使用这个(除了删除上述规则):

A real fix would be to use this(in addition of removing the above rule):

.btn {
    border-left: 1px solid #ccc;
    }
.btn:last-child {
    border-right: 1px solid #ccc;
    }

这篇关于表格内按钮上的 twitter 引导工具提示未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！