Tooltips and Help Texts
smartVISU
provides functions to add tooltips to it's design elenents or embed popups with help texts into the html page.
Note: this may not work on mobile devices running Android since the hover effect is not supported.
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.
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.
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
<span data-tip= "Switch for the mirror light">
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'llight_mirror.svg') }}
</span>
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
<div class="ui-help-container">
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }}
<a href="#{{ page }}_myhint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
<div data-role="popup" id="{{ page }}_myhint" data-arrow="true" data-theme="c">Switch for the mirror light. </div>
</div>
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.
.ui-help-container.ui-help-icon img.icon1,
. ui-help-container.ui-help-icon svg.icon1 {
width: 2em;
height: 2em;
}
Then call the popup directly with both classes in the anchor tag.
Example
{{ basic.stateswitch('', 'bath.light.switch', 'mini', '', 'light_mirror.svg') }} Mirror
<a href="#{{ page }}_myhint1" data-rel="popup" class="ui-help-container ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
<div data-role="popup" id="{{ page }}_myhint_2" data-arrow="true" data-theme="c">Switch for the mirror light. </div>
Mirror
Switch for the mirror light.