1
00:00:02,270 --> 00:00:08,780
So let's make sure that the text that shows up on our tooltip can be set from outside

2
00:00:08,780 --> 00:00:11,660
and for that, we will use an attribute.

3
00:00:11,990 --> 00:00:18,840
Now attributes are not something that is exclusive to your web components or your custom elements,

4
00:00:18,980 --> 00:00:23,340
attributes exist on a lot of built-in HTML elements,

5
00:00:23,390 --> 00:00:27,440
take a link for example, here the ref thing here,

6
00:00:27,440 --> 00:00:35,540
that is an attribute and it allows you to configure this element, so the link here, in a declarative way

7
00:00:36,050 --> 00:00:43,660
which means you don't have to write any code, no Javascript code to set the target of this link

8
00:00:44,000 --> 00:00:46,810
and we want to use the same approach for our own tooltip,

9
00:00:46,880 --> 00:00:55,850
for example it would make sense that on our uc-tooltip tag here, we can use a text attribute or a tooltip

10
00:00:56,210 --> 00:00:59,420
text attribute or whatever you want to name it,

11
00:00:59,540 --> 00:01:08,770
I will name it just text and here, web components is a set of standards

12
00:01:08,950 --> 00:01:18,510
for example. This could be the text I want to display when I hover over this uc-tooltip element, now for

13
00:01:18,510 --> 00:01:19,250
the second one,

14
00:01:19,260 --> 00:01:21,230
I won't set a text attribute,

15
00:01:21,240 --> 00:01:24,600
so here we maybe want to have a default value.

16
00:01:24,680 --> 00:01:29,090
How do we now use that attribute from inside our tooltip?

17
00:01:29,090 --> 00:01:34,450
Well it's actually pretty simple, inside of our constructor,

18
00:01:34,450 --> 00:01:41,700
we can initialize a new private variable and I will name it tooltip text.

19
00:01:41,820 --> 00:01:50,310
Now there, I will call get attribute and now enter the name of the attribute for which I want to extract

20
00:01:50,310 --> 00:01:51,400
the value

21
00:01:51,420 --> 00:01:58,120
and in my case that is text because I chose text as the attribute name here.

22
00:01:58,190 --> 00:02:04,930
So now we save whatever we stored as text or as the text attribute value, we save that in

23
00:02:04,930 --> 00:02:11,940
tooltip text and we can now use that down there where we save or we set up some text to be displayed.

24
00:02:12,020 --> 00:02:21,460
So here instead of this hardcoded text, I will set this tooltip text as a value. Now with that if we

25
00:02:21,460 --> 00:02:25,280
save this, we can go back and reload this page

26
00:02:25,330 --> 00:02:30,720
and now if we hover over that, we don't see anything there right.

27
00:02:30,720 --> 00:02:37,950
Well the reason for that is that here, we're initializing it in the constructor but as you learned, the

28
00:02:37,980 --> 00:02:43,980
custom element has been created at this point but it has not been mounted to the DOM yet,

29
00:02:44,010 --> 00:02:47,670
this will only have happened inside of the connected callback.

30
00:02:47,670 --> 00:02:54,100
So we should move this line into our connected callback so that we can safely access this DOM nodes

31
00:02:54,110 --> 00:02:55,030
attributes

32
00:02:55,080 --> 00:02:59,040
because at this point of time, it will have been rendered into the DOM

33
00:02:59,250 --> 00:03:07,080
and now if we save that and we reload this page, we see web components as a set of standard. Now for the

34
00:03:07,080 --> 00:03:08,550
second question mark,

35
00:03:08,550 --> 00:03:12,090
we don't see anything because we have no default value there.

36
00:03:12,180 --> 00:03:19,710
Now to make sure we have a solution for both cases, I will actually go back into the constructor and

37
00:03:19,710 --> 00:03:25,980
set the tooltip text here to some dummy tooltip text, maybe something that makes a little bit more sense

38
00:03:25,980 --> 00:03:27,050
than that

39
00:03:27,120 --> 00:03:32,960
and here I only want to override it when we have that attribute. For this, I'll add an if check where I

40
00:03:32,950 --> 00:03:36,030
see if this has attribute text,

41
00:03:36,030 --> 00:03:42,600
so only if we have that attribute being set, I will extract that attribute and store its text in a tooltip

42
00:03:42,600 --> 00:03:43,560
text,

43
00:03:43,560 --> 00:03:48,390
otherwise this will not be overriden and we'll be using our dummy text.

44
00:03:48,390 --> 00:03:54,660
So now we have the basic initialization which does not access the DOM in the constructor and then we

45
00:03:54,660 --> 00:04:01,740
do access the DOM and override the default value with a more specific value if we have the text attribute

46
00:04:01,740 --> 00:04:09,480
being set in the connected callback and now we can reload this page once again, we see web components

47
00:04:09,480 --> 00:04:15,660
is a set of standards for the first tooltip, for the second, we see our dummy tooltip text.

48
00:04:15,660 --> 00:04:18,180
Now this is how we can work with attributes.

49
00:04:18,210 --> 00:04:25,890
Now there is a special thing when we then later change attribute values and you will also learn that

50
00:04:25,890 --> 00:04:32,760
there is another way of setting something like this then through the attributes but that is something

51
00:04:32,760 --> 00:04:35,880
we'll come back later, for now we have that,

52
00:04:35,970 --> 00:04:42,810
let me now show you how you can add some styling to this component because that obviously is missing.