/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author Martin Gleiß, Wolfram v. Hülsen
* @copyright 2012 - 2023
* @license GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/
{% extends "index.html" %}
{% block content %}
{{ 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') }}
Switch for the mirror light.
{% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }}
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
Switch for the mirror light.
{% endverbatim %}{% endfilter %}
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }} Mirror
Switch for the mirror light.
{% endblock %}