/** * ----------------------------------------------------------------------------- * @package smartVISU * @author Martin Gleiß, Wolfram v. Hülsen * @copyright 2012 - 2023 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ {% extends "index.html" %} {% block content %}

Tooltips and Help Texts

{{ lib.smartVISU }} provides functions to add tooltips to it's design elenents or embed popups with help texts into the html page.

1. Tooltips

Put the widget into a html tag containing the attribute "data-tip" and the tooltip text.
Note: this may not work on mobile devices running Android since the hover effect is not supported.

Example

{% filter trim|escape|nl2br %}{% verbatim %} {{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'llight_mirror.svg') }} {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }}

2. Popups with Help Texts

Put the widget and the popup into a div-tag carrying the class "ui-help-container". Make sure to give the popup a unique id. Including the page in the id is recommended in order to avoid cross-page disturbances.

Example

{% filter trim|escape|nl2br %}{% verbatim %}
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }} help
Switch for the mirror light.
​​
​ {% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }} help
Switch for the mirror light.
​​

As shown above, the standard help popup expects the classes "ui-help-container" and "ui-help-icon" on different levels. If the layout requires working without an additional div tag the styles can be defined in the file ./pages/yourpages/visu.css.
{% filter trim|escape|nl2br %}{% verbatim %} .ui-help-container.ui-help-icon img.icon1, . ui-help-container.ui-help-icon svg.icon1 { width: 2em; height: 2em; } {% endverbatim %}{% endfilter %}
Or define the styles directly in the img-tag for the anchor icon: style = "width: 2em; height: 2em;"
Then call the popup directly with both classes in the anchor tag.

Example

{% filter trim|escape|nl2br %}{% verbatim %} ​{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }} Mirror help
Switch for the mirror light.
​​ {% endverbatim %}{% endfilter %}
​{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }} Mirror help
Switch for the mirror light.
​​
{% endblock %}