-
Notifications
You must be signed in to change notification settings - Fork 1
/
xtag.json
58 lines (58 loc) · 5.35 KB
/
xtag.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{
"name": "ToolTip",
"tagName": "x-tooltip",
"version": "0.1.4",
"author": "Leon Zhang",
"description": "Content callout that appears in current context to point at an element and is associated with a triggering element and interaction-style in the underlying content",
"demo": "demo/testpage.html",
"categories": [
"ui"
],
"compatibility": {
"firefox": 5,
"chrome": 4,
"ie": 9,
"opera": 12,
"android": 2.1,
"ios": 4
},
"documentation": {
"description": "Content callout that appears in current context to point at an element and is associated with a triggering element and interaction-style in the underlying content",
"attributes": {
"orientation": "Determines where the tooltip appears in relation to the triggering element. Valid options are 'top', 'bottom', 'left', 'right'. If not provided, or if invalid, defaults to auto placement of tooltip.",
"trigger-style": "Indicates how the tooltip is triggered. Valid presets are 'hover' and 'custom'. When set to 'hover', the tooltip is triggered when the user moves their cursor over a triggering element, and dismissed when moved off. When set to 'custom', no default behavior is implemented for triggering the tooltip. This is useful when you want to define your own triggering system using the .show(), .hide(), and .toggle() API calls without any default behaviors getting in the way. If set to anything else, the tooltip will use this as the event name to listen for on targeted elems to show the tooltip. (defaults to 'click')",
"trigger-selector": "Indicates how to select elements that would trigger the tooltip. If given a selector of '_previousSibling', the tooltip will use the immediately preceding sibling element in the DOM tree as its triggering element. Similarly, when set to '_nextSibling', the tooltip will use its next DOM sibling as its triggering element. Otherwise, the selector will be applied to the tooltip's parent node as a search query, and any elements that are not part of the tooltip itself will act as triggering elements for the tooltip. (For example, if you were to provide '.fancy-selector' as this attribute's value, and foo is your tooltip element, the elements you would get back would be same as those found from foo.parentNode.querySelectorAll('.fancy-selector').)",
"ignore-outer-trigger": "If present, for non-'hover' and non-'custom' trigger styles, indicates whether an event firing outside of a targeting element should close the tooltip. Has no effect on preset trigger styles",
"ignore-tooltip-pointer-events": "If present, pointer events on the tooltip will be ignored, keeping it from blocking interaction with underlying elements.",
"allow-overflow": "By default, the tooltip will always try to place the tooltip in a way that is constrained by both the container element and the window's viewport (ie: accounting for scrolling).\n\nIf `allow-overflow` set, this will instead allow the tooltip to be placed freely, even if it overflows the containing element (However, the tooltip will still be constrained by the window's viewport)."
},
"events": {
"tooltipshown": "Fired by the x-tooltip element when tooltip is shown",
"tooltiphidden": "Fired by the x-tooltip element when tooltip is hidden"
},
"methods": {
"refreshPosition()": "This method immediately repositions the tooltip to recenter on the triggering element. This is useful if the tooltip's contents are changed and need to be immediately visually repositioned.",
"show()": "This method forces the tooltip to display (this will fire a 'tooltipshown' event).",
"hide()": "This method forces the tooltip to hide (this will fire a 'tooltiphidden' event).",
"toggle()": "This method forces the tooltip to toggle whether it is visible or not (this will fire a 'tooltipshown' or 'tooltiphidden' event, whichever is appropriate)."
},
"getters": {
"presetTriggerStyles": "Returns a list of the valid preset style types for the 'trigger-style' attribute.",
"targetElems": "Returns a list of all DOM elements currently selected as a target of the tooltip.",
"orientation": "This will provide the current value of the orientation attribute.",
"triggerStyle": "This will provide the current value of the trigger-style attribute.",
"triggerSelector": "This will provide the current value of the trigger-selector attribute.",
"content": "This will provide the DOM element that is acting as the content area of the tooltip.",
"ignoreOuterTrigger": "This will provide the current value of the ignore-outer-trigger attribute.",
"ignoreTooltipPointerEvents": "This will provide the current value of the ignore-tooltip-pointer-events attribute."
},
"setters": {
"orientation": "This will change the value of the tooltip's orientation attribute.",
"triggerStyle": "This will change the value of the tooltip's trigger-style attribute.",
"triggerSelector": "This will change the value of the tooltip's trigger-selector attribute.",
"content": "This will replace the DOM element for the tooltip's content area with an entirely new DOM element, destroying the old one.",
"ignoreOuterTrigger": "This will change the current value of the ignore-outer-trigger attribute.",
"ignoreTooltipPointerEvents": "This will change the current value of the ignore-tooltip-pointer-events attribute."
}
}
}