search

arcanus55 / neodigm55

An eclectic low-code vanilla JavaScript UX micro-library for those that defiantly think for themselves.
https://thescottkrause.com/emerging_tech/neodigm55_ux_library/
BSD 3-Clause "New" or "Revised" License
17 stars 2 forks source link

NeodigmTulip | New Tool Tip component #35

Closed neodigm closed 1 year ago

neodigm commented 1 year ago

Depends on the Pop Tart component.

arcanus55 commented 1 year ago

Requirements (draft)

Visually reference Toast.

  1. Theme: String, array, RANDOM, INHERIT ( host ), DEFAULT ( N55_THEME_DEFAULT )
  2. Pipe is line break
  3. Arrow shape pointing at host
  4. Size: x,s,m,l,xl
  5. AMPM
  6. Position: top, right, bottom, left (default top)
  7. Support Icons

Behavior

  1. Mouse Enter (hover) - Declarative | Host comp life cycle (anim delayed)
  2. JS
  1. Mouse Exit (anim delayed)
  2. Click / Touch start (anywhere)
  3. Scroll
  4. Resize (window)
  5. Orientation Change (window)
  6. x seconds (half of Toast delay | feature flag)

Contract

data-n55-tulip='{"msg":"hello", "template":"js-tulip__hello--id", "theme":"RANDOM", "size":"medium","position":"top", "icon":{"char":"phone", "theme":"primary"}}'

neodigm commented 1 year ago

This basic feature is turned on by default in v2.6. While the Tulip component can now be used by anyone on the alpha release candidate, it is far from complete. I do anticipate breaking changes.

neodigm commented 1 year ago

This enhancement is complete in v2.6.

The Tulip component (Tooltip) will display a temporal floating text tip in the proximity of an element when hovered (not on mobile) or when actuated via JavaScript (works on mobile). This behavior is triggered by the existence of the data-n55-tulip attribute. This attribute can contain simple text, like "hello world", or for advanced configuration a JSON string. Up to two lines of text are allowed, delimited by the pipe character "|". When opened declaratively the tulip is dismissed upon click, mouse exit, scroll, resize, or reorientate.