Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/tooltip.json
{
"name": "Tooltip",
"tagName": "noora-tooltip",
"elementClassName": "NooraTooltip",
"className": "noora-tooltip",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Explains an element on pointer hover or keyboard focus.",
"usage": "<noora-tooltip title=\"Copy\"><button slot=\"trigger\">Copy</button></noora-tooltip>",
"attributes": [
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables the tooltip."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "large"],
"default": "small",
"description": "Controls the content layout."
},
{
"name": "title",
"property": "title",
"type": "string",
"default": "",
"description": "Sets the tooltip title."
},
{
"name": "description",
"property": "description",
"type": "string",
"description": "Sets the large-tooltip description."
},
{
"name": "open",
"property": "open",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Controls whether the tooltip is open."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "trigger",
"description": "The described element."
},
{
"name": "icon",
"description": "An icon shown by large tooltips."
}
],
"cssParts": [
{
"name": "trigger",
"description": "The trigger wrapper."
},
{
"name": "content",
"description": "The tooltip content."
}
],
"events": [
{
"name": "noora-open-change",
"type": "CustomEvent<{ open: boolean }>",
"description": "Emitted when the tooltip opens or closes."
}
],
"notes": [],
"examples": [
{
"id": "default",
"title": "Default",
"description": "Explain an icon or compact action.",
"markup": "<noora-tooltip title=\"Tooltip\"><noora-icon slot=\"trigger\" name=\"alert_circle\" label=\"More information\"></noora-icon></noora-tooltip>"
},
{
"id": "large",
"title": "Large",
"description": "Add an icon and supporting description.",
"markup": "<noora-tooltip size=\"large\" title=\"Tooltip\" description=\"Insert tooltip description here. Three lines of text would look better.\"><noora-icon slot=\"trigger\" name=\"alert_circle\" label=\"More information\"></noora-icon><noora-icon slot=\"icon\" name=\"category\"></noora-icon></noora-tooltip>"
}
]
}