Pour que la tooltips s'ouvre au dessus rajouter la class "open-above" apres ".o-tooltip--settings"
Pour que la tooltips s'ouvre en dessous rajouter la class "open-below" apres ".o-tooltip--settings"
.js requis :
<div class="o-settings">
<button class="o-btn o-btn--light o-btn--settings"><span>paramètres</span><i class="c-fonticon__icon-param"></i></button>
<div class="o-tooltip--settings open-below open-right">
<button class="o-btn o-btn--light o-btn--naked js-toggle-trigger" id="btntoggle"><span>Lorem ipsum dolor sit amet</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
</button>
<button class="o-btn o-btn--light o-btn--naked js-toggle-trigger" id="btntoggle"><span>Lorem ipsum dolor sit amet</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
</button>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01" name="checkbox"/><span></span>
<label for="checkbox--01">Lorem ipsum dolor sit amet</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--02" name="checkbox"/><span></span>
<label for="checkbox--02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae quam at risus consectetur maximus vitae a lorem. Morbi arcu leo, imperdiet elementum turpis nec, pharetra vulputate nisl. Phasellus semper commodo elementum. Curabitur tincidunt mi a leo aliquam, nec aliquet neque molestie.</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--01" name="radio"/><span></span>
<label for="radio--01">Lorem ipsum dolor sit amet</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--02" name="radio"/><span></span>
<label for="radio--02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae quam at risus consectetur maximus vitae a lorem. Morbi arcu leo, imperdiet elementum turpis nec, pharetra vulputate nisl. Phasellus semper commodo elementum. Curabitur tincidunt mi a leo aliquam, nec aliquet neque molestie.</label>
</div>
<div class="wrapper__buttons">
<button class="o-btn">Lorem ipsum</button>
<button class="o-btn o-btn--light">Lorem ipsum</button>
<button class="o-btn">LOREM IPSUM DOLOR</button>
</div>
</div>
</div>
<div class="o-settings">
<button class="o-btn o-btn--light o-btn--settings"><span>paramètres</span><i class="c-fonticon__icon-param"></i></button>
<div class="o-tooltip--settings open-below open-center">
<button class="o-btn o-btn--light o-btn--naked js-toggle-trigger" id="btntoggle"><span>Lorem ipsum dolor sit amet</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
</button>
<button class="o-btn o-btn--light o-btn--naked js-toggle-trigger" id="btntoggle"><span>Lorem ipsum dolor sit amet</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
</button>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01" name="checkbox"/><span></span>
<label for="checkbox--01">Lorem ipsum dolor sit amet</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--02" name="checkbox"/><span></span>
<label for="checkbox--02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae quam at risus consectetur maximus vitae a lorem. Morbi arcu leo, imperdiet elementum turpis nec, pharetra vulputate nisl. Phasellus semper commodo elementum. Curabitur tincidunt mi a leo aliquam, nec aliquet neque molestie.</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--01" name="radio"/><span></span>
<label for="radio--01">Lorem ipsum dolor sit amet</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--02" name="radio"/><span></span>
<label for="radio--02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae quam at risus consectetur maximus vitae a lorem. Morbi arcu leo, imperdiet elementum turpis nec, pharetra vulputate nisl. Phasellus semper commodo elementum. Curabitur tincidunt mi a leo aliquam, nec aliquet neque molestie.</label>
</div>
<div class="wrapper__buttons">
<button class="o-btn">Lorem ipsum</button>
<button class="o-btn o-btn--light">Lorem ipsum</button>
<button class="o-btn">LOREM IPSUM DOLOR</button>
</div>
</div>
</div>
<div class="o-settings">
<button class="o-btn o-btn--light o-btn--settings"><span>paramètres</span><i class="c-fonticon__icon-param"></i></button>
<div class="o-tooltip--settings open-below open-left">
<button class="o-btn o-btn--light o-btn--naked js-toggle-trigger" id="btntoggle"><span>Lorem ipsum dolor sit amet</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
</button>
<button class="o-btn o-btn--light o-btn--naked js-toggle-trigger" id="btntoggle"><span>Lorem ipsum dolor sit amet</span>
<div class="o-toggle">
<div class="c-toggle__property">ON</div>
<div class="c-toggle__contrary">OFF</div>
<div class="c-toggle__seesaw"></div>
</div>
</button>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--01" name="checkbox"/><span></span>
<label for="checkbox--01">Lorem ipsum dolor sit amet</label>
</div>
<div class="o-checkbox">
<input type="checkbox" id="checkbox--02" name="checkbox"/><span></span>
<label for="checkbox--02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae quam at risus consectetur maximus vitae a lorem. Morbi arcu leo, imperdiet elementum turpis nec, pharetra vulputate nisl. Phasellus semper commodo elementum. Curabitur tincidunt mi a leo aliquam, nec aliquet neque molestie.</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--01" name="radio"/><span></span>
<label for="radio--01">Lorem ipsum dolor sit amet</label>
</div>
<div class="c-radio">
<input type="radio" id="radio--02" name="radio"/><span></span>
<label for="radio--02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae quam at risus consectetur maximus vitae a lorem. Morbi arcu leo, imperdiet elementum turpis nec, pharetra vulputate nisl. Phasellus semper commodo elementum. Curabitur tincidunt mi a leo aliquam, nec aliquet neque molestie.</label>
</div>
<div class="wrapper__buttons">
<button class="o-btn">Lorem ipsum</button>
<button class="o-btn o-btn--light">Lorem ipsum</button>
<button class="o-btn">LOREM IPSUM DOLOR</button>
</div>
</div>
</div>