UI template tooltip and boarder flash

General
1

Hi there all,

so lately ive been trying my hand at building a "graphic" of sorts for my inverters.
its been an ordeal to say the least but ive made good progress. it physically looks
right hahaha but man i cant seem to get these other function to work.

try and try as I may the tooltip... just wont pop up with the mouse hover... ive gone through over 19 itterations lol. please help....

here is my code at the moment.

<div style="position: relative; width: 60px; height: 100px; background-color: #D0D0D0; border-radius: 10px; 
           border: 2px solid {{ msg.payload['30.1'].LastUpdateInMins > 5? '#FFBF00' : '#000' }};
           {{ msg.payload['30.1'].LastUpdateInMins > 5? 'animation: flash 1s infinite' : '' }}">
    <!-- Inverter IP -->
    <div style="position: absolute; bottom: 20px; left: 6px; font-size: 16px; color: black;">Inv</div>
    <div style="position: absolute; bottom: 5px; left: 7px; font-size: 14px; color: black;">30.11</div>
    <!-- LED status -->
    <div
        style="position: absolute; top: 5px; left: 5px; width: 30px; height: 15px; background-color: {{ msg.payload['30.1'].status_colour }}; border: 1px solid #000;">
    </div>
    <!-- Alarm Toggle -->
    <div style="position: absolute; top: 25px; left: 5px; width: 10px; height: 10px; background-color: {{ msg.payload['30.1']['Inv-30.1AlrmS'] ? 'green' : 'red' }}; border-radius: 50%; cursor: pointer;"
        ng-click="send({ payload: { '30.1': { AlrmT: 'ChangeST' } } })"></div>
    <!-- AC KW Graph -->
    <div style="position: absolute; top: 5px; right: 5px; width: 10px; height: 80px; border: 1px solid #000;">
        <div style="position: absolute; bottom: 0; width: 100%; 
                 height: {{msg.payload['30.1'].AC_KW_Out / 600 * 100}}%; 
                 background-color: #00FF00;"></div>
        <!-- Line Breakout -->
        <div style="position: absolute; top: bottom; left: 0; width: 100%; height: 100%;">
            <div style="position: absolute; bottom: 16.67%; left: 0; width: 6px; height: 1%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 33.33%; left: 0; width: 6px; height: 2%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 50%; left: 0; width: 8px; height: 2%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 66.67%; left: 0; width: 6px; height: 1%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 83.33%; left: 0; width: 6px; height: 2%; background-color: #000;">
            </div>
        </div>
    </div>
    <!-- Tooltip -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;"
        ng-mouseover="tooltipVisible = true" ng-mouseleave="tooltipVisible = false">
        <div
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #000; padding: 5px; border-radius: 5px; display: {{tooltipVisible ? 'block' : 'none'}};">
            <p>GridStatus: {{msg.payload['30.1'].GridStatus}}</p>
            <p>LastUpdateInMins: {{msg.payload['30.1'].LastUpdateInMins}}</p>
            <p>ER1: {{msg.payload['30.1'].ER1}}</p>
            <p>ER2: {{msg.payload['30.1'].ER2}}</p>
            <p>ER3: {{msg.payload['30.1'].ER3}}</p>
            <p>OldER1: {{msg.payload['30.1'].PriorState.OldER1}}</p>
            <p>OldER2: {{msg.payload['30.1'].PriorState.OldER2}}</p>
            <p>OldER3: {{msg.payload['30.1'].PriorState.OldER3}}</p>
        </div>
    </div>
    <style>
        @keyframes flash {
            0% {
                border-color: #FFBF00;
            }

            50% {
                border-color: #000;
            }

            100% {
                border-color: #FFBF00;
            }
        }
    </style>
</div>
2

Just by reading the code - you are trying to interact with the tooltip as trigger to show and hide itself by using CSS display. This can't happen cos if something has display:none , it is not interactive anyhow. The hover must be added to some visible element and it then should change rules for tooltip visibility.

1 Like
3

okay sooo....
I took your suggestion and managed to cobble something together. its a little different
and not made something quite like this before. but it half worked and half didnt?.cause.
there doesnt seem to be a delay, doesnt it load only when the mouse stops over the ui?
also when i move the mouse over it and it kind of flashes very rapidly in and out.also
cant seem to modify the size. any changes to the tooltip parameters dont seem to matter? ive change the width and height. nothing. changed
the ratio and still nothing. its like its confined to within a box.but the text is to long so its getting cut off left and right.

Any suggestions?

<div style="position: relative; width: 60px; height: 100px; background-color: #D0D0D0; border-radius: 10px; 
           border: 2px solid {{ msg.payload['30.1'].LastUpdateInMins > 5? '#FFBF00' : '#000' }};
           {{ msg.payload['30.1'].LastUpdateInMins > 5? 'animation: flash 1s infinite' : '' }}">
    <!-- Inverter IP -->
    <div style="position: absolute; bottom: 20px; left: 6px; font-size: 16px; color: black;">Inv</div>
    <div style="position: absolute; bottom: 5px; left: 7px; font-size: 14px; color: black;">30.11</div>
    <!-- LED status -->
    <div
        style="position: absolute; top: 5px; left: 5px; width: 30px; height: 15px; background-color: {{ msg.payload['30.1'].status_colour }}; border: 1px solid #000;">
    </div>
    <!-- Alarm Toggle -->
    <div style="position: absolute; top: 25px; left: 5px; width: 10px; height: 10px; background-color: {{ msg.payload['30.1']['Inv-30.1AlrmS'] ? 'green' : 'red' }}; border-radius: 50%; cursor: pointer;"
        ng-click="send({ payload: { '30.1': { AlrmT: 'ChangeST' } } })"></div>
    <!-- AC KW Graph -->
    <div style="position: absolute; top: 5px; right: 5px; width: 10px; height: 80px; border: 1px solid #000;">
        <div style="position: absolute; bottom: 0; width: 100%; 
                 height: {{msg.payload['30.1'].AC_KW_Out / 600 * 100}}%; 
                 background-color: #00FF00;"></div>
        <!-- Line Breakout -->
        <div style="position: absolute; top: bottom; left: 0; width: 100%; height: 100%;">
            <div style="position: absolute; bottom: 16.67%; left: 0; width: 6px; height: 1%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 33.33%; left: 0; width: 6px; height: 2%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 50%; left: 0; width: 8px; height: 2%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 66.67%; left: 0; width: 6px; height: 1%; background-color: #000;">
            </div>
            <div style="position: absolute; bottom: 83.33%; left: 0; width: 6px; height: 2%; background-color: #000;">
            </div>
        </div>
    </div>
    <!-- Tooltip -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;"
        ng-mouseover="tooltipVisible = true" ng-mouseleave="tooltipVisible = false">
        <div
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #000; padding: 5px; border-radius: 5px; display: {{tooltipVisible ? 'block' : 'none'}};">
            <p>GridStatus: {{msg.payload['30.1'].GridStatus}}</p>
            <p>LastUpdateInMins: {{msg.payload['30.1'].LastUpdateInMins}}</p>
            <p>ER1: {{msg.payload['30.1'].ER1}}</p>
            <p>ER2: {{msg.payload['30.1'].ER2}}</p>
            <p>ER3: {{msg.payload['30.1'].ER3}}</p>
            <p>OldER1: {{msg.payload['30.1'].PriorState.OldER1}}</p>
            <p>OldER2: {{msg.payload['30.1'].PriorState.OldER2}}</p>
            <p>OldER3: {{msg.payload['30.1'].PriorState.OldER3}}</p>
        </div>
    </div>
    <style>
        @keyframes flash {
            0% {
                border-color: #FFBF00;
            }

            50% {
                border-color: #000;
            }

            100% {
                border-color: #FFBF00;
            }
        }
    </style>
</div>
4

id actually forgotten to change the title cause... whilst typing out the problem.
i managed to fix the border flash issue.... it was incorrect color reference....