SASS Object Beside to create tooltips/dropdowns

readme.md

Object Beside

Based on BEM IT css convention, this object will place any container beside the parent one. So you can build tooltips, dropdowns, etc just adding this object inside the main wrapper. The only condition is that wrapper has to have position: relative

ie:

<div class='c-label'>
  <div class='c-label__title'>label title</div>
  <div class='o-beside o-beside--bottom'>
    <div class='o-beside__wrapper'>
      <div class='o-beside__content'>tooltip/dropdown/whatever</div>
    </div>
  </div>
</div>

Notes

Note that this snippet uses bourbon mixins to build flex elements as this standard has been changed in the last years. This way we can assure more retro-compatibility.

As it's based on new CSS3 standard Flex this is should be considered as a concept. It seems to have some bugs on Safari, (not tested on Explorer).

_object.beside.sass

/*
  <div class="o-beside**">
    <div class="o-beside__wrapper">
      <div>content</div>
    </div>
  </div>
 */
.o-beside
  position: absolute
  height: 0
  width: 0


.o-beside--bottom
  bottom: -$padding
  right: 50%

.o-beside--bottom-right
  bottom: -$padding
  right: 0

.o-beside--bottom-left
  bottom: -$padding
  left: 0

.o-beside--right
  bottom: 50%
  right: 0

.o-beside__wrapper
  +display(flex)
  +align-items(center)

  .o-beside--center > &
    +justify-content(center)

  .o-beside--start > &
    +justify-content(flex-start)

  .o-beside--end > &
    +justify-content(flex-end)

Looks interesting!
What about to create a codepen preview example?

👍

Here:

Object Beside example

Notice that I avoided bourbon mixins.