renathy renathy - 1 month ago 12
CSS Question

Bootstrap btn-group with disabled button & tooltip-wrapper - mess with btn order and rounded corners

I'm unable to line up three buttons in boostrap button group.

1) I have btn-group and three buttons inside

2) Second and third button sometimes is disabled (logic for enable/disable is written inside knockout model, but it is not important here)

3) Second button has tooltip, so I created tooltip-wrapper for button, because disabled buttons cannot have tooltips (from Bootstrap documentation http://getbootstrap.com/javascript/:


"Tooltips on disabled elements require wrapper elements To add a
tooltip to a disabled or .disabled element, put the element inside of
a and apply the tooltip to that instead."


4) I have added
container
for wrapper div as per deocumentation:


Tooltips in button groups and input groups require special setting
When using tooltips on elements within a .btn-group or an
.input-group, you'll have to specify the option container: 'body'
(documented below) to avoid unwanted side effects (such as the element
growing wider and/or losing its rounded corners when the tooltip is
triggered).


Unfourtunately after this:

a) the order of third and second button changes.

b) three buttons doesn't look like a
btn-group


I am unable to find a solution or an idea what to try. Changing button order doesn't help.

Here is html and JS fiddle link (http://jsfiddle.net/rRLB4/):

P.S. Please, note that in JS Fiddle I have removed all spaces, enters and tabs in HTML and I do not TidyUp, otherwise there appears some empty spaces and
btn-group
is not lined up.


<div class="btn-group">
<button data-toggle="modal" data-target="#portfolioEditModal" data-bind="click: triggerFileUpload, clickBubble: false" class="btn btn-primary">Import</button>
<div class="tooltip-wrapper" data-toggle="tooltip" data-container="body" data-placement="bottom" data-original-title="Enter data!">
<button data-bind="click: trySave, clickBubble: false" class="btn btn-primary" disabled="">Save</button>
</div>
<button class="btn btn-primary" data-bind="click: showSaveAsDialog, clickBubble: false" disabled="">Save As</button>
</div>

Answer

You need to set the .tooltip-wrapper to float left like buttons do in a button group and adjust the border radius of the button inside the wrapper. Something like this should work:

.tooltip-wrapper {
    display: inline-block;
    float: left;
}

.tooltip-wrapper .btn {
    border-radius: 0;
}

.tooltip-wrapper:first-child .btn {
    border-radius: 3px 0 0 3px;
}

.tooltip-wrapper:last-child .btn {
    border-radius: 0 3px 3px 0;
}

Here's your example updated: http://jsfiddle.net/sxqDt/12/