Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderModalPaginationProgress BarStepsTabsTagToastToolipLightDarkTriggerPositionTheme
Utilities
Styleguide

Tooltip

Documentation and examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations.

Attention: the use of the components needs the squid.js included in the project
Attention + 1: Probably the interaction via Javascript should not work well in SPA applications (independent of the framework React, Angular, Vuejs, etc). For now we have no implementation but we will create in the future, for now just use the styles and create your own implementation

Light

Mouse Over Here
<div
  data-tooltip='Some Text'
  data-tooltip-theme='light'
>
  <!-- HTML CONTENT -->
</div>

Dark

Mouse Over Here
<div
  data-tooltip='Some Text'
>
  <!-- HTML CONTENT -->
</div>

Attributes

Trigger

The attribute data-tooltip-trigger accept click value. To use mouseover just leave it empty

Position

The attribute data-tooltip-position accept:

right top
right center
right bottom
center top
center center
center bottom
left top
left center
left bottom

Theme

The attribute data-tooltip-theme accept dark (or empty) and light values