1 00:00:02,380 --> 00:00:09,070 I want to start with attaching data to DOM elements and why we might want to do that. Now in this project 2 00:00:09,070 --> 00:00:12,240 we worked on, we do display a tooltip. 3 00:00:12,250 --> 00:00:14,920 We got this tooltip component here 4 00:00:14,920 --> 00:00:21,430 and right now what this does is when I click on more info, it adds a tooltip at the very bottom of the 5 00:00:21,490 --> 00:00:26,890 page which of course is something we'll change with some dummy text in there and when we click on it, 6 00:00:26,900 --> 00:00:28,390 it is deleted. 7 00:00:28,660 --> 00:00:35,200 Now the dummy text is displayed because I am setting this here and the problem I have is that I don't 8 00:00:35,200 --> 00:00:38,690 know which text should be displayed for which project. 9 00:00:38,920 --> 00:00:45,820 Now we could be managing data like this in our Javascript code in an array of projects but here we actually 10 00:00:45,820 --> 00:00:51,970 got to some HTML code which for example could be precreated on a server and sent to us on a client 11 00:00:51,970 --> 00:00:52,880 like this 12 00:00:53,080 --> 00:00:58,090 and therefore, we don't really have that tooltip data available in Javascript. 13 00:00:58,120 --> 00:01:03,340 Now it's also not available in normal HTML tags because it shouldn't be rendered to the screen by 14 00:01:03,340 --> 00:01:04,510 default, 15 00:01:04,510 --> 00:01:07,950 instead what you can do is something I already prepared here for you, 16 00:01:07,960 --> 00:01:15,280 we got this special attribute on these list items which represent these different projects, 17 00:01:15,370 --> 00:01:16,810 data-extrainfo. 18 00:01:16,860 --> 00:01:22,400 Now this is not a special attribute you have to attach extra tooltip info, 19 00:01:22,400 --> 00:01:29,260 instead the data- attribute in general is a special attribute you can add to your own elements to 20 00:01:29,260 --> 00:01:31,140 attach any kind of data to them, 21 00:01:31,420 --> 00:01:38,980 so you could add data-id, data- whatever, data- whatever attribute or value you want to 22 00:01:38,980 --> 00:01:43,390 append or you want to store on one of your DOM nodes 23 00:01:43,390 --> 00:01:49,030 and the ID behind appending data or attaching data to DOM nodes simply is that you don't have to 24 00:01:49,030 --> 00:01:54,820 manage it in Javascript. In cases like this one where we don't manage to project in Javascript, 25 00:01:54,820 --> 00:01:58,770 we have a loose connection to the rendered DOM nodes, 26 00:01:58,870 --> 00:02:02,370 we store the IDs of projects in Javascript but that is it, 27 00:02:02,380 --> 00:02:04,590 we don't store any other project data there 28 00:02:04,600 --> 00:02:09,580 and yes we could do that but sometimes you have scenarios where you want to store data in the DOM and 29 00:02:09,580 --> 00:02:15,870 attach it to DOM elements so that when you work with that DOM element, you can read data from it. 30 00:02:15,970 --> 00:02:22,210 Now for that, this extra data- attribute was created which you can safely use to attach any data 31 00:02:22,210 --> 00:02:26,650 you want and you can add as many data attributes here as you wish. 32 00:02:26,650 --> 00:02:30,990 Now the only question is, how can we read from that attribute? 33 00:02:31,050 --> 00:02:33,720 And for that, you've got a special property you can read from. 34 00:02:33,790 --> 00:02:34,960 So here in app.js 35 00:02:34,990 --> 00:02:40,350 when I create a tooltip, here I got access to that tooltip element which I created, 36 00:02:40,360 --> 00:02:46,390 now I also want access to that DOM node for which I'm creating a tooltip because on that DOM node, we'll 37 00:02:46,390 --> 00:02:48,820 find this extra attribute. 38 00:02:48,820 --> 00:02:55,000 Now here in the create method where we create a tooltip, we don't have access to this DOM node but I 39 00:02:55,000 --> 00:03:02,950 am creating my tooltip on the other hand in my project item here which in the end is my Javascript representation 40 00:03:03,100 --> 00:03:09,880 or connection I should say to that DOM node, it's not the DOM node itself, it's just an object which knows 41 00:03:09,880 --> 00:03:15,460 about the ID of that DOM node and therefore we can select that DOM node and we can do this here 42 00:03:15,460 --> 00:03:20,860 in show more info handler which is triggered when I click the more Info button and there before we 43 00:03:20,860 --> 00:03:28,870 created a tooltip, I can reach out to the DOM node itself, so to the project element for example with document 44 00:03:28,900 --> 00:03:30,580 get element by ID 45 00:03:30,790 --> 00:03:38,170 and then this ID is a property of this project item which is the ID of that project here in my DOM, 46 00:03:38,200 --> 00:03:40,130 so I can create by that. 47 00:03:40,240 --> 00:03:45,340 This gives me access to this list item and on this list item, we got the special data attribute. 48 00:03:45,670 --> 00:03:52,810 Now to read from this, we can reach out to project element and there, you've got a special dataset property 49 00:03:53,030 --> 00:04:01,360 and that's important to keep in mind, these data- attributes are all merged together in a dataset 50 00:04:01,480 --> 00:04:02,620 property. 51 00:04:02,620 --> 00:04:06,560 Now let's console log that to get a feeling for what's inside there. 52 00:04:06,580 --> 00:04:09,840 Now before we can try this out, one important note about this ID, 53 00:04:09,880 --> 00:04:13,210 this refers to this property or at least it should 54 00:04:13,360 --> 00:04:18,670 but due to the fact that show more info handler is attached to an event listener, we should actually 55 00:04:18,670 --> 00:04:21,340 bind this here, 56 00:04:21,340 --> 00:04:26,820 otherwise this will not refer to the same thing inside of show more info handler. 57 00:04:26,820 --> 00:04:31,450 And with that if we save that and we then reload and click on more info, you'll see this is what's getting 58 00:04:31,450 --> 00:04:40,510 printed, a DOM string map which in the end is a Javascript object where every attribute you added, 59 00:04:40,590 --> 00:04:46,660 every data attribute you added is part of that and you see, the naming is automatically converted to 60 00:04:46,680 --> 00:04:48,060 use camel case. 61 00:04:48,090 --> 00:04:51,720 So I added extra-extra-info, 62 00:04:51,720 --> 00:04:57,120 this becomes an extra info property in this DOM 63 00:04:57,150 --> 00:05:03,630 string map object which I access on the dataset property of the selected node and that's just something 64 00:05:03,630 --> 00:05:05,380 you have to know, you have to keep in mind 65 00:05:05,430 --> 00:05:09,000 or I guess you can always console log it if you want to see what's in there, 66 00:05:09,000 --> 00:05:12,930 this gives us access to this text which was added on the node. 67 00:05:12,990 --> 00:05:19,320 Now if you would want to add your own content through Javascript, that's of course also possible. For 68 00:05:19,320 --> 00:05:20,280 that, 69 00:05:20,280 --> 00:05:27,210 you can reach out to the project element and then simply access dataset and dynamically add a new property 70 00:05:27,210 --> 00:05:27,450 there, 71 00:05:27,450 --> 00:05:34,680 for example some info. Set this to test here and what you'll see is that if you save that and you reload 72 00:05:34,680 --> 00:05:36,080 and click on more info, 73 00:05:36,120 --> 00:05:41,790 if you now inspect the DOM node here, you see besides data extra info, 74 00:05:41,790 --> 00:05:48,060 we now have data some info added down there, so this then automatically gets added for you automatically 75 00:05:48,060 --> 00:05:51,530 when you add a new property to dataset on your DOM node. 76 00:05:51,720 --> 00:05:53,440 So this is how you can set data, 77 00:05:53,550 --> 00:05:58,000 here however I want to read the data and I got my tooltip text here 78 00:05:58,140 --> 00:06:05,730 simply by accessing project element dataset and then extra info was the name and then we can forward tooltip 79 00:06:05,730 --> 00:06:12,000 text to the tooltip as a second argument to the constructor for example and then in the tooltip, 80 00:06:12,000 --> 00:06:13,470 we just have to accept this, 81 00:06:13,530 --> 00:06:20,340 so here we could add that text, get that text, then add it as a property, this text equal text and then 82 00:06:20,340 --> 00:06:26,760 here in create where we set that text instead of using dummy, we can now use this.text. 83 00:06:26,940 --> 00:06:32,160 And with that if we save that and we reload and click on more info and scroll to the bottom of the page, 84 00:06:32,580 --> 00:06:39,210 we see this custom text which is part of the DOM node. The tooltip still is in the wrong position but 85 00:06:39,270 --> 00:06:45,600 we at least extract the right text and this is all possible with the special data attribute and in Javascript, 86 00:06:45,600 --> 00:06:49,650 with dataset which helps us access this data attribute value.