ux-joyride Documentation
This component implements Foundation's joyride component.
{
"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
}
{
"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
}
{
"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
}
{
"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"
}
{
"linkText": "point 1",
"id": "showOnHover",
"title": "Read more",
"contents": [
{
"selector": ".right-point1",
"text": "journey started :point 1
"
}
],
"showOnHover": true
}
- First step
- Second step
- Third step
This is {{step}}
{{description}}
{
"linkText": "see breakdown",
"id": "tipModal",
"title": "tooltip title",
"contents": [
{
"text": "journey started :point 1
"
}
],
"hasYield": false
}