Demos: o-tooltip

<div class="o-colors-page-background">
	<div class="demo-tooltip-container" id="box-tooltip">

		<button class="o-buttons o-buttons--big demo-tooltip-target" id="demo-tooltip-target">
			Share
		</button>

		<div data-o-component="o-tooltip" data-o-tooltip-position="above" data-o-tooltip-target="demo-tooltip-target" data-o-tooltip-show-on-construction="true">
			<div class="o-tooltip-content">
				<p>supercalifragilisticexpialidocious</p>
			</div>
		</div>
	</div>
</div>

<div class="o-colors-page-background">
	<div class="demo-tooltip-container" id="box-tooltip">

		<button class="o-buttons o-buttons--big demo-tooltip-target" id="demo-tooltip-target">
			Share
		</button>

		<div data-o-component="o-tooltip" data-o-tooltip-position="right" data-o-tooltip-target="demo-tooltip-target" data-o-tooltip-show-on-hover="true">
			<div class="o-tooltip-content">
				Share this article via email
			</div>
		</div>
	</div>
</div>

<div class="o-colors-page-background">
	<div class="demo-tooltip-container" id="box-tooltip">

		<button class="o-buttons o-buttons--big demo-tooltip-target" id="demo-tooltip-target">
			Share
		</button>

		<div data-o-component="o-tooltip" data-o-tooltip-position="right" data-o-tooltip-target="demo-tooltip-target" data-o-tooltip-show-on-click="true">
			<div class="o-tooltip-content">
				<p>Share this article via email</p>
			</div>
		</div>
	</div>
</div>

<div class="o-colors-page-background">
    <div class="demo-tooltip-container" id="box-tooltip">

        <button class="o-buttons o-buttons--big demo-tooltip-target" id="demo-tooltip-target">
            Share
        </button>

        <div data-o-component="o-tooltip" data-o-tooltip-position="right" data-o-tooltip-target="demo-tooltip-target" data-o-tooltip-toggle-on-click="true" data-o-tooltip-close-after="3" data-o-tooltip-show-on-construction="true">
            <div class="o-tooltip-content">
                <p>Share this article via email</p>
            </div>
        </div>
    </div>
</div>

<div class="o-colors-page-background">
    <div class="demo-tooltip-container" id="box-tooltip">
        <p>This tooltip will close after 3 seconds</p>
        <button class="o-buttons o-buttons--big demo-tooltip-target" id="demo-tooltip-target">
            Share
        </button>

        <div data-o-component="o-tooltip" data-o-tooltip-position="right" data-o-tooltip-target="demo-tooltip-target" data-o-tooltip-show-on-construction="true" data-o-tooltip-close-after="3">
            <div class="o-tooltip-content">
                <p>Share this article via email</p>
            </div>
        </div>
        <p>This tooltip will show after 3 seconds</p>
        <button class="o-buttons o-buttons--big demo-tooltip-target" id="demo-tooltip-target-2">
            Share
        </button>

        <div data-o-component="o-tooltip" data-o-tooltip-position="right" data-o-tooltip-target="demo-tooltip-target-2" data-o-tooltip-show-after="3">
            <div class="o-tooltip-content">
                <p>Share this article via email</p>
            </div>
        </div>
    </div>
</div>

<div class="demo-scrollable-container">
	<div class="o-colors-page-background">
		<div class="demo-tooltip-container" id="box-tooltip">
			<button class="o-buttons o-buttons--big imperative-tooltip-target">
				Hover
			</button>
		</div>
	</div>
</div>

<div class="o-colors-page-background">
	<div class="demo-tooltip-container" id="box-tooltip" style="margin-top:200px;margin-left:20%">

		<button class="o-buttons o-buttons--big demo-tooltip-target" id="demo-tooltip-target">
			Share
		</button>

		<div data-o-component="o-tooltip" data-o-tooltip-position="above" data-o-tooltip-position-s="right" data-o-tooltip-position-m="below" data-o-tooltip-position-l="left" data-o-tooltip-position-xl="above" data-o-tooltip-target="demo-tooltip-target" data-o-tooltip-show-on-construction="true">
			<div class="o-tooltip-content">
				<p>Spin me right round..</p>
			</div>
		</div>
	</div>
</div>