---
layout: examples
title: Tooltip on viewport
extra_css:
  - "tooltip-viewport.css"
extra_js:
  - "tooltip-viewport.js"
---

<button type="button" class="btn btn-secondary tooltip-bottom float-left" title="This should be shifted to the right">Shift Right</button>
<button type="button" class="btn btn-secondary tooltip-bottom"            title="This should be shifted to the left">Shift Left</button>
<button type="button" class="btn btn-secondary tooltip-left"              title="This should be shifted down">Shift Down</button>
<button type="button" class="btn btn-secondary tooltip-left btn-bottom"   title="This should be shifted up">Shift Up</button>

<div class="container-viewport">
    <button type="button" class="btn btn-secondary tooltip-viewport-bottom"            title="This should be shifted to the right">Shift Right</button>
    <button type="button" class="btn btn-secondary tooltip-viewport-left"              title="This should be shifted down">Shift Down</button>
    <button type="button" class="btn btn-secondary tooltip-viewport-bottom float-left" title="This should be shifted to the left">Shift Left</button>
    <button type="button" class="btn btn-secondary tooltip-viewport-left btn-bottom"   title="This should be shifted up">Shift Up</button>
</div>