Hello. In this video, I want to show you how to use or to create something that we call tooltip. And tooltips are basically those information that they show when the user for example over. So what I want to do is, if the user stop the mouse on top of this bar I want to show this information, some information about the bar. So for example right now, I don't know what information is behind those bars. I can't tell you right now, for example, that what we are showing here are countries, but still you don't know which countries we are showing here. So I want to be able to once I stop my mouse over, I want to see the information about which country are being highlighted? And to do that, we can use tooltips. And the tooltip is not restricted only for text, you could do any more complex thing. You could show another visualization inside the tooltip if you want. And how are we going to do that? So one thing that we have to think about is, which element who showed this information? How are we going to manipulate the elements to show it? So what we'll do is that, we're going to create one element and this is going to be our tooltip. And it's going to be there all the time, we just don't show it to the user, it's going to be visible. And then when the user hover something then we're going to show this tooltip, and maybe position this tooltip in the position that we want. So that's the whole idea of what we want to do. Second thing that is important is, I don't want my tooltip to be draw inside the SVG. The reason is, if I have something inside the SVG and just think to move this to the border, it's going to get cut, because nothing can pass this border if it's inside the SVG. So we're going to create our tooltip outside the SVG, and we're going to be manipulating it as the user manipulates our SVG. So we have here a bar chart and we created this bar chart using most of the things that we have seen before. We have this that you created, we have the yScale. We took we were careful to invert all these scale, so we could get the right version of the sizes here and then we draw our bar chart. Now our goal is to add the tooltip. So to do that, the first thing that I do is to create this tooltip. So here on the top, what we would do is that, we're going to add the div. And this div will be our tooltip. So right now we have it here, we just added the div, and this div is going to be right now a box with some text inside. We have here on the top a CSS that is for matching this div, right? I will have to do two things in addition to for the work. So the first thing that I want to do is, allow this div to be moved around, because right now I cannot set the x and y of the position of the div freely through the page. If I do that, it going to work only here locally. It's going to be really tricky. So in order to move around, I have to detach this div from the flow of the page. So remember HTML page has a flow and thing are going to be one below other, but now I want to detach that and say, I want to move this thing around. In order to do that, I will change CSS property that's called position and we're going to call position absolute. So it just means now I can move this thing around. The first impact that you're going to see is that right now, it doesn't go all the way to the end. It restricted itself to the size of the text, but now you will see that you will be able to move it later. The other thing that we want to do is that, we don't want to show it. We only want to show it when the user over the bar, so to do that we will use display none. So it just means that now we don't see it. It's still there, but we don't see it. And when the use are over it, we'll be able to show it. So let's see how this work. So here on the bottom when we created our bar, we're going to add the new list in there. And it will list then to mouse enter, this means every time the mouse enter this element. And what we would do, we would call a function here, showTooltip. And we will show the country name. So I will pass the text that I want to show to this function. And this function will take care of showing that on Tooltip. It's just to make easier to reuse this function later. So now here in my function showTooltip, I'm receiving my text here. And what I would do is, I will select my Tooltip element. So it has an ID Tooltip, and I will change the text to the text that I received as parameter. And I will also change its style. And I basically, what we change the property display to block. So this is mean that now every time the user over one of these bars, you see that the tooltip shows down. And it doesn't disappear when I go away, but if I refresh, you'll see it only appears when I hover. And as I hover, I can now see the name of the countries. So we're almost there. The next step is, I want it to disappear when I move away. So it's up to me if I want to create or not a new, Function. Here I want, so I just going to do mouseleave, and I'm going to do all the jobs here. So d3.select tooltip, and it's going to change itsstyle. Again, display and we will bring it back to none. That means that every time the user enter, we will show every time the user leaves or we will remove the tooltip. Great, so now we have a tooltip that shows up and goes away. But it doesn't really look like as a tooltip, because it's on the bottom. I want these tooltip to be close to my mouse, so as I move my mouse this tooltip is there. So how we do that? We're going to use a separate thing here that is the coordinates. So when I call my function showTooltip, I will not only pass the text that I want to show but also the position. And remember that, when we're dealing with d3, we can get the position of the mouse by using d3 event. So we can do d3.event.clientX in order to get the X position. And we can do d3.event.clientY to get the Y position. So now when I call the showTooltip function, I will receive here on the top those two coordinates. And that's going to be my coords variable here. So we'll get the x and y position, and when we're dealing with SVG, we change x and y. But when we're dealing with HTML elements that's div, so we'll be using HTML. You will need to change top and left. So we'll change the style here. Style. Top, so top is my ZY axis. So Y coordinate is the second element of my array here. So we're going to get the second element, and since it starts from zero that's why we use one. And then the left is my X axis. And we would be using our coordinates zero. So now when my move my mouse, you'll see that the tooltip follows the mouse. So if I go here, I see the tooltip close and so one. You may have a few problems like, sometimes the tooltip is like right on the bottom of your mouse and you want it to be a little far, and its kind of thing. So you can adjust that by saying, for example, that I want the coordinates of the mouse, but I want 30 pixels down. So now, the tooltip would be not just on top. You can close there, you can say 10 pixels. You can change the background as well. So if you don't want to have this transparent thing in order to make our tooltip easier to read, you can change the background color, To white. So now when see my tooltip, I don't have that overlapping and more it's easier to read. And finally, as I move my mouse I want the tooltip to follow the mouse. So it turns out if I copy this function here that have from mouse enter, and then do the same thing for mouse move. What I get now is a tooltip that follows my mouse. You see that as I move the mouse, the tooltip goes up and down with my mouse. So those are ways that you can create the tooltip. Remember, that you want to put inside the tooltip is up to you. It doesn't have to be a simple text, it can be even a complex visualization. And it's very helpful in order to provide context or more detailed information to your user when you create your visualization.
