Shipyard Tooltips

Add more context to any element your design with a simple tooltip.

Data Tooltips .tooltip-data

Useful when you need tooltips with content that’s a bit more complex than your average tooltip.

<button class="tooltip-data tooltip-data-top" data-tooltip="What a lovely tooltip">Top</button>
<button class="tooltip-data tooltip-data-bottom" data-tooltip="What a lovely tooltip">Bottom</button>
<button class="tooltip-data tooltip-data-right" data-tooltip="What a lovely tooltip">Right</button>
<button class="tooltip-data tooltip-data-left" data-tooltip="What a lovely tooltip">Left</button>

Light, Data Tooltips .tooltip-data.tooltip-data-light

Useful when the tooltip you’re display will appear on a darker background.

<button class="tooltip-data tooltip-data-light tooltip-data-{ direction }" data-tooltip="What a lovely tooltip">CTA</button>

Custom Tooltips .tooltip

Useful when you need tooltips with content that’s a bit more complex than your average tooltip.

<!-- Tooltip (Top) -->
<button class="tooltip-parent">
  Call to Action
  <div class="tooltip tooltip-top z-50"><!-- Tooltip Content --></div>
</button>

<!-- Tooltip (Bottom) -->
<button class="tooltip-parent">
  Call to Action
  <div class="tooltip tooltip-bottom z-50"><!-- Tooltip Content --></div>
</button>

<!-- Tooltip (Right) -->
<button class="tooltip-parent">
  Call to Action
  <div class="tooltip tooltip-right z-50"><!-- Tooltip Content --></div>
</button>

<!-- Tooltip (Left) -->
<button class="tooltip-parent">
  Call to Action
  <div class="tooltip tooltip-left z-50"><!-- Tooltip Content --></div>
</button>

Light, Custom Tooltips .tooltip.tooltip-light

Useful when the tooltip you’re display will appear on a darker background.

<button class="tooltip-parent">
  Call to Action
  <div class="tooltip tooltip-light tooltip-{ direction } z-50"><!-- Tooltip Content --></div>
</button>

CSS Output

Here’s the raw CSS output if you’d like a peak under the hood.

.tooltip,
.tooltip-data::after { border-radius: 5px; width: auto; opacity: 0; line-height: 1.5; min-width: 220px; max-width: 400px; text-align: left; visibility: hidden; position: absolute; transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 300ms; color: #fff; padding: 10px 15px; font-weight: 300; font-size: 16px; background: #313a44 }
.tooltip-active,
.tooltip-data:hover::after,
.tooltip-data:hover::before,
.tooltip-parent:hover .tooltip,
.tooltip-parent:hover .tooltip-data::after,
.tooltip-data:hover .tooltip,
.tooltip-data:hover .tooltip-data::after { opacity: 1; visibility: visible }
.tooltip-parent,
.tooltip-data { overflow: visible; position: relative }
.tooltip-top,
.tooltip-data-top::after { left: 50%; bottom: 100%; transform: translate(-50%, 0) }
.tooltip-top-active,
.tooltip-data-top:hover::after,
.tooltip-parent:hover .tooltip-top,
.tooltip-parent:hover .tooltip-data-top::after,
.tooltip-data:hover .tooltip-top,
.tooltip-data:hover .tooltip-data-top::after { transform: translate(-50%, -6px) }
.tooltip-bottom,
.tooltip-data-bottom::after { left: 50%; top: 100%; transform: translate(-50%, 0) }
.tooltip-bottom-active,
.tooltip-data-bottom:hover::after,
.tooltip-parent:hover .tooltip-bottom,
.tooltip-parent:hover .tooltip-data-bottom::after,
.tooltip-data:hover .tooltip-bottom,
.tooltip-data:hover .tooltip-data-bottom::after { transform: translate(-50%, 6px) }
.tooltip-left,
.tooltip-data-left::after { top: 50%; right: 100%; transform: translate(0, -50%) }
.tooltip-left-active,
.tooltip-data-left:hover::after,
.tooltip-parent:hover .tooltip-left,
.tooltip-parent:hover .tooltip-data-left::after,
.tooltip-data:hover .tooltip-left,
.tooltip-data:hover .tooltip-data-left::after { transform: translate(-6px, -50%) }
.tooltip-right,
.tooltip-data-right::after { top: 50%; left: 100%; transform: translate(0, -50%) }
.tooltip-right-active,
.tooltip-data-right:hover::after,
.tooltip-parent:hover .tooltip-right,
.tooltip-parent:hover .tooltip-data-right::after,
.tooltip-data:hover .tooltip-right,
.tooltip-data:hover .tooltip-data-right::after { transform: translate(6px, -50%) }
.tooltip-arrow,
.tooltip-data-right::before,
.tooltip-data-left::before,
.tooltip-data-bottom::before,
.tooltip-data-top::before,
.tooltip-right::before,
.tooltip-left::before,
.tooltip-bottom::before,
.tooltip-top::before { content: ''; position: absolute; width: 0px; height: 0px; transform: rotate(45deg); transform-origin: center center; border: 4px solid transparent }
.tooltip-arrow-top,
.tooltip-data-top::before,
.tooltip-top::before { left: 50%; margin-left: -4px; border-radius: 0 0 3px 0; border-right-color: #313a44; border-bottom-color: #313a44 }
.tooltip-arrow-top-active,
.tooltip-data-top:hover::before { transform: rotate(45deg) translate(-4.5px, -4.5px) }
.tooltip-light.tooltip-arrow-top,
.tooltip-light.tooltip-data-top::before,
.tooltip-arrow-top.tooltip-data-light::after,
.tooltip-arrow-top.tooltip-data-light::before,
.tooltip-data-light.tooltip-data-top::before,
.tooltip-light.tooltip-top::before { border-right-color: #fff; border-bottom-color: #fff; box-shadow: 1px 1px 1px rgba(30,37,44,0.05) }
.tooltip-arrow-bottom,
.tooltip-data-bottom::before,
.tooltip-bottom::before { left: 50%; margin-left: -4px; border-radius: 3px 0 0 0; border-top-color: #313a44; border-left-color: #313a44 }
.tooltip-arrow-bottom-active,
.tooltip-data-bottom:hover::before { transform: rotate(45deg) translate(4.5px, 4.5px) }
.tooltip-light.tooltip-arrow-bottom,
.tooltip-light.tooltip-data-bottom::before,
.tooltip-arrow-bottom.tooltip-data-light::after,
.tooltip-arrow-bottom.tooltip-data-light::before,
.tooltip-data-light.tooltip-data-bottom::before,
.tooltip-light.tooltip-bottom::before { border-top-color: #fff; border-left-color: #fff; box-shadow: -1px -1px 0 rgba(30,37,44,0.03) }
.tooltip-arrow-left,
.tooltip-data-left::before,
.tooltip-left::before { top: 50%; margin-top: -4px; border-radius: 0 3px 0 0; border-top-color: #313a44; border-right-color: #313a44 }
.tooltip-arrow-left-active,
.tooltip-data-left:hover::before { transform: rotate(45deg) translate(-4.5px, 4.5px) }
.tooltip-light.tooltip-arrow-left,
.tooltip-light.tooltip-data-left::before,
.tooltip-arrow-left.tooltip-data-light::after,
.tooltip-arrow-left.tooltip-data-light::before,
.tooltip-data-light.tooltip-data-left::before,
.tooltip-light.tooltip-left::before { border-top-color: #fff; border-right-color: #fff; box-shadow: 1px -1px 1px rgba(30,37,44,0.05) }
.tooltip-arrow-right,
.tooltip-data-right::before,
.tooltip-right::before { top: 50%; margin-top: -4px; border-radius: 0 0 0 3px; border-left-color: #313a44; border-bottom-color: #313a44 }
.tooltip-arrow-right-active,
.tooltip-data-right:hover::before { transform: rotate(45deg) translate(4.5px, -4.5px) }
.tooltip-light.tooltip-arrow-right,
.tooltip-light.tooltip-data-right::before,
.tooltip-arrow-right.tooltip-data-light::after,
.tooltip-arrow-right.tooltip-data-light::before,
.tooltip-data-light.tooltip-data-right::before,
.tooltip-light.tooltip-right::before { border-left-color: #fff; border-bottom-color: #fff; box-shadow: -1px 1px 1px rgba(30,37,44,0.05) }
.tooltip-top::before { bottom: -4px }
.tooltip-bottom::before { top: -4px }
.tooltip-left::before { right: -4px }
.tooltip-right::before { left: -4px }
.tooltip-light,
.tooltip-data-light::after,
.tooltip-data-light::before { color: rgba(22,43,68,0.8); border-color: #fff; background-color: #fff; box-shadow: 0 1px 2px rgba(30,37,44,0.08) }
.tooltip-data::before { opacity: 0; visibility: hidden; transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 300ms }
.tooltip-data::after { width: auto; min-width: 0; max-width: none; padding: 5px 10px; border-radius: 3px; text-align: center; font-weight: 700; white-space: nowrap; content: attr(data-tooltip); font-size: 12px }
.tooltip-data-top::before { top: -4px }
.tooltip-data-bottom::before { bottom: -4px }
.tooltip-data-left::before { left: -4px }
.tooltip-data-right::before { right: -4px }