<ch5-button
id="overlay_info"
type="text"
shape="circle"
size="small"
sendEventOnClick="overlay_toggle_click"
receiveStateSelected="overlay_show"
iconClass="material-icons info">
</ch5-button>
<span> other stuff covered up</span>
<ch5-overlay-panel
dismissable="false"
receiveStateShow="overlay_show"
positionTo="overlay_info"
positionOffset="right-center">
<span>This is onscreen help</span>
</ch5-overlay-panel>
.material-icons.info:before {
content:"info";
}
Sample text
<ch5-button label="trigger pulse (to show)" sendEventOnClick="sig_trig_pulse1"></ch5-button>
<hr>
<ch5-overlay-panel
receiveStateShowPulse="sig_trig_pulse1"
closable
dismissable
>
<p>Sample text</p>
<ch5-image
id="ex1-img"
url="https://picsum.photos/200/300/?random">
</ch5-image>
</ch5-overlay-panel>
Sample text
<ch5-button label="trigger pulse (to show)"
sendEventOnClick="sig_trig_show_pulse2"></ch5-button>
<ch5-button label="trigger pulse (to hide)"
sendEventOnClick="sig_trig_hide_pulse2"></ch5-button>
<hr>
<ch5-overlay-panel
receiveStateShowPulse="sig_trig_show_pulse2"
receiveStateHidePulse="sig_trig_hide_pulse2"
closable
dismissable
>
<p>Sample text</p>
<ch5-image
id="ex1-img"
url="https://picsum.photos/200/300/?random">
</ch5-image>
</ch5-overlay-panel>