ux-joyride

ux-joyride Documentation

This component implements Foundation's joyride component.


Use Cases Manifest DefaultBelowLeftStart on initShow on hoverhasYieldTool tip
    {{#events.uxJoyride_46}}
  • {{this}}
  • {{/}}

	{
    "linkText": "point 1
point 2
point 3", "id": "tipRight", "title": "tooltip title", "contents": [ { "selector": ".right-point1", "text": "

journey started :point 1

" }, { "selector": ".right-point2", "text": "

continue journey :point 2

" }, { "selector": ".right-point3", "text": "

end journey :point 3

" } ], "hasYield": false }
    {{#events.uxJoyride_47}}
  • {{this}}
  • {{/}}

	{
    "linkText": "point 1
point 2
point 3", "id": "tipDown", "open": "down", "contents": [ { "selector": ".down-point1", "text": "

journey started :point 1

" }, { "selector": ".down-point2", "text": "

continue journey :point 2

" }, { "selector": ".down-point3", "text": "

end journey :point 3

" } ], "hasYield": false }
    {{#events.uxJoyride_48}}
  • {{this}}
  • {{/}}

	{
    "linkText": "point 1
point 2
point 3", "id": "tipLeft", "title": "tooltip title", "open": "left", "contents": [ { "selector": ".left-point1", "text": "

journey started :point 1

" }, { "selector": ".left-point2", "text": "

continue journey :point 2

" }, { "selector": ".left-point3", "text": "

end journey :point 3

" } ], "hasYield": false }
    {{#events.uxJoyride_49}}
  • {{this}}
  • {{/}}

	{
    "linkText": "point 1
point 2
point 3", "id": "tipOpen", "title": "tooltip title", "contents": [ { "selector": ".init-point1", "text": "

journey started :point 1

" }, { "selector": ".init-point2", "text": "

continue journey :point 2

" }, { "selector": ".init-point3", "text": "

end journey :point 3

" } ], "hasYield": false, "isOpenOnInit": "true" }
    {{#events.uxJoyride_50}}
  • {{this}}
  • {{/}}

	{
    "linkText": "point 1",
    "id": "showOnHover",
    "title": "Read more",
    "contents": [
        {
            "selector": ".right-point1",
            "text": "

journey started :point 1

" } ], "showOnHover": true }
This is

This is {{step}}
{{description}}
    {{#events.uxJoyride_52}}
  • {{this}}
  • {{/}}

	{
    "linkText": "see breakdown",
    "id": "tipModal",
    "title": "tooltip title",
    "contents": [
        {
            "text": "

journey started :point 1

" } ], "hasYield": false }

Semantic Data Model
linkText - Initial display text
id - A default ID for the widget
title - The title text for the popup (Optional)
open - Open position for popup ((Default) right, down or left)
contents - List of contents for each step (required only if hasYield is false)
hasYield - Bool, determins if content is used or not
isOpenOnInit - Bool, flags to open first step imediatly
defaultNubTop - Allow positioning of top nub
defaultNubLeft - For open down, nub left offset, (Default is foundation's default, 22)
maxMobileWidth - Set a maximum width for the joyride (Default is 500)
closeText - The text for the close button (Default '×')
showOnHover - Bool, whether to open joyride on hover