1
00:00:02,680 --> 00:00:08,320
So now that we're able to listen to changes in the attributes, we of course can also adjust the content

2
00:00:08,350 --> 00:00:13,660
we display in our tooltip text. This is something we were not able to do before,

3
00:00:13,660 --> 00:00:15,590
well now we can.

4
00:00:15,590 --> 00:00:23,020
Now let's keep in mind that show tooltip is responsible for showing some text here and we do actually

5
00:00:23,020 --> 00:00:30,190
show the tooltip text, the tooltip text on the other hand is a property which we set in a connected callback,

6
00:00:30,190 --> 00:00:37,240
so now all we have to do is we have to update the tooltip text here when our attribute changes.

7
00:00:37,240 --> 00:00:45,010
So I will first of all check if the old value is equal to the new value, because that means it's kind

8
00:00:45,010 --> 00:00:46,110
of triggered

9
00:00:46,270 --> 00:00:51,910
but maybe you entered a new value but it is exactly equal to the old value

10
00:00:51,970 --> 00:00:58,060
and in this case I'll just return, I'll not execute any other code because I don't want to waste any

11
00:00:58,060 --> 00:00:58,980
performance here,

12
00:00:58,990 --> 00:01:03,970
I don't want to run any other code that would be redundant here because if the new value is equal to

13
00:01:03,970 --> 00:01:10,270
the old value, there is nothing that could have changed. If this is not equal, we'll make it into the next

14
00:01:10,270 --> 00:01:13,840
step because now something changed and we want to update this

15
00:01:13,980 --> 00:01:18,080
and then here I'll check if the name of the attribute is equal to text and

16
00:01:18,190 --> 00:01:20,540
we simply have to add our own logic here,

17
00:01:20,560 --> 00:01:25,870
we have to be aware of which attributes could be changing and which matter for us and what do we want

18
00:01:25,870 --> 00:01:27,610
to do when they change.

19
00:01:27,610 --> 00:01:34,210
So here I know if the text attribute changed and yes, we are only listening to changes in the text attribute

20
00:01:34,210 --> 00:01:37,120
here but we could have more attributes we're listening to,

21
00:01:37,150 --> 00:01:43,990
so it's a good practice to check this and if we know okay the text attribute changed, then I know I want

22
00:01:43,990 --> 00:01:53,800
to set my tooltip text here equal to the new value and of course the logic you add here depends on what

23
00:01:54,040 --> 00:01:57,820
your attribute does and what a change to it means for you.

24
00:01:57,820 --> 00:02:02,970
You could also be required to add a new element to the shadow DOM here, here

25
00:02:03,190 --> 00:02:11,530
I just need to change my tooltip text because with that changed, if I reload this a second time, here I

26
00:02:11,540 --> 00:02:19,450
see my default text of course and now I can add this is the adjusted text here and if I hit enter and

27
00:02:19,450 --> 00:02:25,420
I hover over this question mark again, we see the adjusted text here too because in our web component,

28
00:02:25,840 --> 00:02:31,810
we simply adjust our tooltip text here when this text attribute changes.