search

picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.32k stars 809 forks source link

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

Open ghost opened 5 years ago

ghost commented 5 years ago

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 commented 5 years ago

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;
}