1 00:00:00,390 --> 00:00:07,480 Now that we have the mouseover being set, we also want to set up an interval in order to show the tooltip. 2 00:00:07,800 --> 00:00:11,720 So let's set that one up and this is going to be set as a global variable. 3 00:00:11,880 --> 00:00:18,060 We'll call it my interval, and we're just going to set it up as a blank variable that we can now use 4 00:00:18,060 --> 00:00:19,140 within our code. 5 00:00:19,440 --> 00:00:22,470 We can get out of the console messages as we're not going to need those anymore. 6 00:00:22,500 --> 00:00:25,350 Adding it in to we're adding an event listener. 7 00:00:25,380 --> 00:00:26,420 Let's select. 8 00:00:26,430 --> 00:00:29,040 And first of all, we're going to clear the interval. 9 00:00:29,070 --> 00:00:34,110 So in case there is an existing interval, so before we set the my interval will clear the existing 10 00:00:34,110 --> 00:00:41,700 interval and we need to get the position of X and Y of the mouse and we'll console log that information 11 00:00:41,700 --> 00:00:42,570 out for now. 12 00:00:42,810 --> 00:00:49,050 But we can get that information within the event object and that can be contained within Client X.. 13 00:00:49,050 --> 00:00:50,820 And we've also got one for client Y. 14 00:00:51,210 --> 00:00:58,350 So whatever we hover over, we get the exposition of the mouse and we can also get the Y position as 15 00:00:58,350 --> 00:00:58,590 well. 16 00:00:58,830 --> 00:01:04,730 And then we can utilize these in order to determine where we want to position our tooltip. 17 00:01:04,740 --> 00:01:11,160 So taking our tooltip object and that's the output element that we've selected within the variable called 18 00:01:11,160 --> 00:01:13,710 output and taking output. 19 00:01:13,840 --> 00:01:20,850 Let's update its style properties and its display property and setting that to block so that it's visible. 20 00:01:20,910 --> 00:01:22,770 We also need to position output. 21 00:01:22,790 --> 00:01:30,300 So taking output and taking its style property, so taking its value for top, we're going to take whatever 22 00:01:30,300 --> 00:01:38,070 the value of client Y is and add five to that and then make sure that we add in the PIC's so that we 23 00:01:38,070 --> 00:01:45,750 can set the style value add on also using the left for the horizontal and do the same thing so that 24 00:01:45,750 --> 00:01:49,570 we'll position the value of the tooltip wherever we're located. 25 00:01:50,010 --> 00:01:54,520 So you see it's appearing there and it's showing up as we're hovering over that element. 26 00:01:54,870 --> 00:02:01,020 So next we need to output an update to inner HTML of that element and we already have that information 27 00:02:01,020 --> 00:02:02,240 being contained within Holder. 28 00:02:02,460 --> 00:02:04,010 So adding it into Holder. 29 00:02:04,200 --> 00:02:09,660 Now, every time we hover over, we see we've got the tooltip popping up and now there's one other thing 30 00:02:09,660 --> 00:02:11,810 that we need to set and that's the interval. 31 00:02:12,090 --> 00:02:13,940 So it is clearing out the interval. 32 00:02:14,250 --> 00:02:15,840 Let's set our interval. 33 00:02:15,840 --> 00:02:21,480 So using that global object of my interval and then the set interval function in JavaScript, setting 34 00:02:21,480 --> 00:02:22,570 up a function. 35 00:02:22,590 --> 00:02:28,460 So we want it to disappear after a certain time period and we can set that to three thousand milliseconds. 36 00:02:29,040 --> 00:02:34,320 So no matter what, even if we're still hovering over that element, we're taking output and we're updating 37 00:02:34,320 --> 00:02:39,170 its style property and the display property setting that to none. 38 00:02:39,180 --> 00:02:40,950 So that will always disappear off the screen. 39 00:02:40,950 --> 00:02:46,350 So even if we're still hovered over, you're going to see that the tooltip will stop and disappear. 40 00:02:46,980 --> 00:02:48,930 And that's actually exactly what we want to happen. 41 00:02:49,020 --> 00:02:54,240 And there's one other function that we want to happen, and that's whenever we move off of the element. 42 00:02:54,510 --> 00:03:01,080 We want to add another event listener for Mouse out, and that can remove out the tooltip as well. 43 00:03:01,410 --> 00:03:07,530 So let's add that one last, that listener in as the same thing as the mouseover except its different 44 00:03:07,740 --> 00:03:10,440 value that we're listening for and we're listening for on this case. 45 00:03:10,440 --> 00:03:11,730 We're listening for mouse out. 46 00:03:12,120 --> 00:03:15,720 And whenever we mouse out, then we're going to hide the tooltip. 47 00:03:16,170 --> 00:03:16,980 So do that. 48 00:03:17,010 --> 00:03:19,320 And now we know that the mouse out. 49 00:03:19,980 --> 00:03:25,890 So whenever we go over it, we show it shows up for a little bit and shows up for up to three seconds. 50 00:03:26,220 --> 00:03:29,510 And whenever we hover over it again, we see the tooltip once again. 51 00:03:29,520 --> 00:03:31,530 So go ahead and add this into your project. 52 00:03:31,800 --> 00:03:38,490 Add in the tooltip displaying whatever you're hovering over the particular selected content and have 53 00:03:38,490 --> 00:03:41,490 that show up within your page using the different event. 54 00:03:41,490 --> 00:03:44,280 Listeners listening for Mouse over and Mozote. 55 00:03:44,580 --> 00:03:46,620 So coming up next, we'll do a quick code review.