Tooltip on button does not work if badge is also used.

[ghost]

When using the badge and the tooltip feature in combination, the tooltip is not visible, instead only the badge position is changed.

<button className="btn btn-primary badge tooltip" data-tooltip="foo" data-badge={11}><i className="icon icon-search"/></button>

[adam-weber]

By adding a badge and tooltip, the button is given conflicting position attributes. To do this with the current version of spectre, you'll need to deconstruct the elements and add a bit of CSS.

The tooltip has to be added on the outer element to capture the hover event without interrupting the functionality of a button.

<button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum dolor sit amet">
  Button
  <span class="badge" data-badge="8"></span>
</button>

.btn.tooltip > .badge {
  transform: translate(-.05rem, -.5rem);
  position: absolute;
}