This version of this component hasn't been branded yet.

Please check the latest version, 3.1.2, as branding is a relatively new addition to our components.

o-tooltip

Component description

active

Demo

Basic demo

<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-construction="true">
			<div class="o-tooltip-content">
				Share this article via email
			</div>
		</div>
	</div>
</div>

Hover

Display on hover demo

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

Click

Display on click demo

<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">
				Share this article via email
			</div>
		</div>
	</div>
</div>

No-markup

Tooltip declared in js, with no markup

<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>
Bower Dependencies
ftdomdelegate ^2.1.0
o-normalise ^1.2.1
o-overlay ^2.0.0
o-viewport ^3.1.2
o-visual-effects ^2.0.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-tooltip@^2.1.1

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-tooltip"@"^2.1.1"

For more information see the Origami build process.