Create Advance Tooltip | Image Hotspot using HTML, CSS, JavaScript

[Music] so what's up guys welcome to another video today we are going to create a advanced tooltip so in this video you can see that we have an image and we have some tool tips going on which have a nice pulse effect as you can see here we have this pulse effect and however i will hover one of them as you can see the tooltip here that's the advanced tooltip that we are going to have and that's it and if you can see this one we have this and for this one we have this as you can see we have many kind of tooltips here and the content as you can see that inside of our tooltip it can be anything so i just made it a flexbox here as you can see so it can be anything so you can add anything as you want and it is perfectly responsive it is awesomely responsive let me show you what i mean so now as you can see that we are in the responsive section whenever i will click it as you can see the indicator and all the other things and just notice the indicator it will move automatically as you can see the indicator and the point and the pin is moving automatically according to our width of the device so that's how much responsiveness it is and i will show you how you can create this and if i show you this one and as you can see that it is moving the pin and all the other content according to our device so in this video i will create these super responsive tooltip hope you will like it so no more talk let's dive into it so today is the day 18 of our 30 days 30 submits so for the day 18 we are going to create advanced tooltips and also in the day 16 you can see that we already did the basic tooltips if you interested you can check it out the video and also the code for the basic tooltips where i made tooltips with only the css and if you are interested in this 30 days 30 submits challenge please come here in this repo i will link it in the description here you can find all the interesting submits that i did in this 30 days 30 submits challenge so no more talk let's dive into the code actually so here are my html file and here css and js so in the html first of all let's create a boilerplate here so in the boilerplate i will have a section and in this section i will have a d with a class of container and in this div i will have a image so let's have image so now i don't have any kind of image so let me copy the images here so now we have some images as you can see these are the images that we are going to use okay so you can find those images also in the source code so here in our image here let's create a image source so i will use image one and here alternative let's say that that's an image so perfect and if i save here and refresh i can see my image here so now first of all let's actually style this image and resize it so in our link here let's link the css first of all so it will link the css and in the css first of all let's say that the padding will be zero and margin will be zero and box sizing will be the border box so now we don't have any kind of extra gap here so after that let's come to the html and let's say that font size will be about 16 pixel and also let's say that font family will be monsterat and that's fine and after that let's come to the body here and let's say that i will have a background color for the body which will be this one and also let's have a width of something like 100 percent so if i save as you can see that the background color is changed and the width of our body is now 100 percent and after that let's come to the section and let's say that the height will be 100 vh and the width will be 100 percent and also let's say that display will be flex and align items center and justify content center so it will keep the image in the center as you can see so after that let's actually resize our image so it's in the container so first of all let's style the container so in the container let's say that the width will be 90 percent and the max width will be about 1200 pixel and let's say that margin will be 0 and auto now as you can see that the image have only the 90 percent of its width so after that let's come to the image so it's in the container so container image i can say that something like width will be 100 and the height will be 100 so if i save now as you can see that it's perfectly resized looking good so now let's come to the tooltips so in our html that's our image so after the image we will have a div with a class of all tooltips so that's the div where we will have our all tool tips so let's create first tool tip here so let's get div with a class of tooltip and also let's have another class here for our individual style so tooltip one so the first class which is the tooltip will be common for each and every tool tips that we will have in this tooltips div and the second class as you can see that this will be for our individual style so let's say that i wanna have the tooltip one in the side here tooltip two in the side here that's the style that we are going to put in this tooltip one so basically this second class is for the individual style and the first class is for the common style so in our first rule tip we will have two more div the first one will be the pin and the second one will be the content so d with a class of content actually let's say the tooltip content tool tip content so that's the structure so in each tooltip we will have a pin and other will be the tooltip content and also in the tooltip content we will have another div with a class of arrow so this will be the little arrow which will indicate the tooltip so after this arrow we will have our content so after this arrow we will have our actual content so div with the class of content and sorry my mistake so content so in this content we'll have our content so first one will be the h1 let's say that hello tool tip so that's the tooltip one and we will have also pre-graph so let's create some break grab lorem let's say that 20 so looking good for now so now if i save as you can see that we can see the h1 and also the pre-graph which is for our tooltip one here so let's actually style those tooltips here so first of all let's call the all tooltips so two tips so this is the class where we will have all our tooltips so we need to position it absolute and make sure that the parent of the our all tooltips is the position relative so now it's in the position absolute so after that we can position it so first of all let's say that the width will be 100 percent of our container and height will be also hundred percent and also let's say that the left will be zero and the top will be zero now if i save now you can see that the position of our all tooltips is now absolute position and here let's call the tooltip content class so tool tip content and here let's actually say that the position will be the absolute and the background color will be a white color and also let's say that i will have a box shadow so the box shade will be 0 pixel 0 pixel and 20 pixel spread and also let's say that we will have a blackish box shadow with 20 percent of opacity so now you can see that the background of our content is now white and we have a subtle box shadow under the content as you can see so after that let's actually have some padding inside of our this content so 30 pixel will look good and also let's have a border radius about 30 pixel not 30 pixel 8 pixel four yeah four pixel is looking good actually eight let's keep it eight so after that let's have the width of it so the width will be 90 so now as you can see that the width will be 90 vw and after that let's also have the maximum width will be 300 pixel so now you can see that the maximum width will have 300 pixel but whenever we will go to the small device so let me show you so if i go something like that now you can see that it will keep in the 90 percent of our mobile width as you can see that it's also responsive because i said that the maximum width will be 90 percent as you can see that's the 90 percent of our width so that's for the responsiveness and it's looking good for now so after that what i need actually i need to disappear it so let's say that opacity will be 0 and also say that pointer event will be none so point our event will be none so now you can see it and you can't actually click that and after that let's actually keep the set index too so now we can see it so for the testing purpose actually let's comment this so that i can style all these things so now we can see it so after that let's actually style the arrow for our tooltip content so for that i can say something like tooltip content dot arrow so let's actually style the arrow so the position of the arrow will be absolute and the width will be 10 pixel and also the height will be 10 pixel so after that so we can't still see it because you don't have any kind of background color so if i give it a background color of aqua so that we can see it so that's the div as you can see for our arrow so looking fine for now and after that let's actually come to the border and let's say that i will have a border of 10 pixel solid solid and also let's keep it the color of aqua so now you can see that that's the actually the arrow here so we don't need the width actually and actually let's give it the shape of a row so for that what i can do actually i can say something like border bottom color so the bottom color will be something like red so i am giving the bottom color red because i want the arrow to indicate in the top so if you want the arrow in the top you can say something like bottom if you want the arrow indicating into the down you can say something like top so basically it will be the opposite direction so now you can see that when i say something like bottom color is red now we have this arrow so now what i can do actually in our border i can say that instead of this aqua color i want the border color transparent so if i say transparent and also we don't need any kind of color so let's remove it so now you can see that we have this nice little icon here so let's actually position it so for that i can say something like it will be in the top zero pixel so now in the top zero pixel so now you can see that it is in the top zero but it is not perfectly top of our this div so for that i can say something like transform translate and here i can say something like minus 50 percent and for the y i need to minus 100 percent so now you can see that it is now perfectly in the top of our div here so now i can say after that the left will be 50 now you can see that it's now perfectly center of our div now what you can do you can change the color red to the white so let's actually keep the white now you can see that we have this white arrow here so looking good and after that what i need actually i need to style my pin so for that i need to disappear my content so let's actually remove the comment here so it will remove this div or it will disappear the div for now so if i save now you can see that it's now disappeared and what i need actually i need to create my pin here so the first pin that we are going to create so for the position we will say that it will be absolute and the top will be 0 not 0 let's say that 50 so it's from the fifty percent of our top and in the left it will be eighty percent actually let's say that fifty percent for now so from the top fifth person from the left fifty percent so it should be basically around here so let's also give it a background color of white so that we can see it and also let's give it a heightened width so 25 pixel and the width will be 25 pixel so now you can see that that's our pin for now and actually let's make it rounded so border ideas will be 50 percent now you can see that that's rounded and also let's say that the cursor will be pointed now we have this pin for our tooltip so after that we will have our pulse effect in this pin so let's say that in the pin we will have a suitable element so after and the content of the suitability will be empty and the position will be absolute and the top will be zero and the left will be zero also say that the height will be 100 percent and the width will be 100 percent and also let's say that the background color of white now you can see that that's the square that we have that's the after solo elements so let's actually make it also the rounded so water radius 50 percent so now we have two circle here the first circle is the pin and the second circle is the after so now what i can say is i can animate the after circle this one so for that let's create a animation keyframe so here keyframes and let's name it pulse effect so pulse effect and let's say something like in zero percent of our animation i will say transform a scale so i will escalate something like from one to something like in hundred percent the sky will be so a scale will be something like three so you can see that the scale will be from one to three if you want you can do something like point five so it will start from the point five and it will grow to that three so after that what i also want in our zero percent the opacity will be one and in the hundred percent the opacity will be zero so now we will have a nice effect which will be something like pulse effect so effect sorry so now we have this keyframe actually let's use this keyframe in our after so let's say that animation so animation the name of the animation is the pulse effect so pulse effect and it will go to three second and ease in out and also infinite time so now you can see that we have this pulse effect so actually let's make one second now it's looking much better i think okay so now that's looking really amazing with the one second of animation time as you can see so after that let's actually functionalize our tooltip so for that we will use our javascript so in our body tech before the closing body tag let's actually add the script here so main jazz so in our javascript first of all let's actually select all the elements so here let's say that selection and first of all let's select the tooltips so tool tips so for now we have the one tooltip as you can see that that's the one tooltip we have now but in the future we might have many more so for that i will actually grab all of them with the query selector all so let's say that document dot query selector all so make sure that it's all because you might have multiple tooltips in your website so make sure that you have the query sector all instead of query selector so here let's actually select them so i can say something like all tooltips so that's under the all tooltips and we have a common class of tooltip for all of our tooltip so it will select each and every two tips and it will store it in this variable so after that let's actually select our full dib so full deep so document dot query selector so query selector and we will select the section actually so that's the full dip for our tooltip as you can see that that's the dip of section where we have all of our thing for these tooltips so that's why i just select this section for our full dip so let's say that constant we will have a container so container so this container will be this one as you can see that we already have a class of container so this is something higher you have your image okay so i will just grab the container because this container is having now the same height and width as we have in our image as you can see so for that let's actually grab it here so document dot query selector and let's have the container container class so after that let's actually have a function here so function content position position and something like that so in this function we will position our content so it will be dynamically positioned every time when we will call the function so what we will do actually in this function so let's actually call all the tooltips and let's say that for each tooltip so for each tooltip what i want to do so i'll say that i will first of all grab the pin of the tooltip i will grab the content of the tooltip so let's actually grab the tooltip pin so tooltip dot query selector so we are now in the individual two tip and we are grabbing the individual pin for the tooltip so let's say that pin and also grab the content so for that we have tooltip content so tooltip content and here let's say that tooltip actually content that will be fine so that's the tooltip pin and there's the tooltip content and after that let's actually grab the arrow also so arrow here so let's say that it's in the tooltip dot query selector and i can say something like arrow so now we have the arrow here from the individual of our tooltip so after that we will position our content here so first of all let's say that the content content dot style style dot left so the left will be so i wanna have the left as our pin dot offset left so if i also press the pixel here now we are changing the content style left it will be perfectly in the left of our pin so let's actually remove the opacity 0 from our content so that we can see it so if i remove the opacity 0 now if i save that so it's not working actually we need to call the function we made the function but we did not called it yet so let's actually call the function so content position and just pass it here so now if i save we should see still it is not working so here as you can see that we just made a mistake we just said the offset so it will be said that offset left actually let me make it so offset left so as you can see that it's working now so that's our pin and the content position style left is from our pin left as you can see so now it will be dynamic so whenever i will change it so as you can see that it will be from the our content left so also let's actually change the top value so for that i can say something like the top of our content will be something like it's in that pin offset top so instead of left let's actually say that offset top so something like that now you can see that it's perfectly from the left and from the top as you can see here so if i also refresh as you can see that it's working so now what i want to do actually i wanna minus the div width so not the full width the half of the deep width i wanna minus from this left so it will if i remove the half of width it will be a start from this and it will be perfectly center so for the left i can say something like minus or subtract what i can do i can say something like content dot offset width so width divided by 2 and plus our pixel so now if i save now you can see that it is perfectly center it's perfectly center and we need to actually move the top a little bit so for that i can say something like from the top i will also have 20 pixel extra so if i make 20 pixel it's now 20 pixel down if i make 50 pixel here so it's 50 pixel down so let's keep it 30 pixel which is looking good for now so as you can see that it's almost working perfectly just we need to move this arrow now and the last thing we need actually we need to move this arrow which is you can see that here so to move the arrow what i can do actually i can say something like arrow dot style dot left and the left will be it's from the pin left so pin dot offset left so offset left and also we wanna minus so now the pin will be here so if i save so let me show you so if i save that so now the pin will be something like here because it is from here we are giving the offset left of our pin so after that what i remove actually i wanna remove the content offset left so let's actually do that so minus content offset left so not that so offset left so now you can see that it's in the previous place so after that i wanna also add the half of our pin width so i can say something like pin dot offset width so now if i save it's now full of offset width so i don't need the full of offset width i want the high of our offset width so now if i save as you can see that it's now perfectly indicating our arrow so actually the arrow is now perfectly in place so actually let's keep it 40 pixels so it will make now 40 pixel down as you can see here so now it's looking perfect so it's working now and actually instead of manually calling this function what i know i do actually i can add some even listener in our window so even listener here so event please and so let's actually call the window so window dot add even listener so whenever our content will be loaded in our website we wanna call this function automatically so let's actually call the event for that so the event is the dom content loaded so whenever our dom will be loaded perfectly we will call the function which is the content position so now the content position will be called automatically when our dom will be loaded so also let's actually call this same function in our window again when we will resize our window so let's say that the window dot even listener and whenever we will resize our window we wanna update the position so that's why we will also call the content position so now if i save now you can see that it's working now you can see that that's the content and the arrow is perfect so now whenever we will change the position sorry we will change the height and width of our window means we will resize our window the content will remain same as you can see perfect so after that what i need actually whenever i will hover i wanna show these content otherwise i don't wanna show it so to make it what i need actually i need to remove it for the initial state so let's say that the opposite will be 0 and the pointer event none and if i say we can't see it and actually let's make it functional so let's say that tooltip dot forage and tooltip what i wanna do here so let's say that i wanna also grab the pin here so constant pin actually so the pin will be tool tip so we already did this here so let's actually just copy this copy here and paste it so i'm just getting that pin and the content for the individual tooltip now we have that and after that let's say that pin dot add even listener so now we are adding even listener in the pin and the event will be the mouse move so whenever we will make a mouse move over this pin we wanna do something what we wanna do so we wanna call a arrow function here so in this arrow function what i wanna do actually i wanna add a class in our tooltip so let's say that tooltip dot class list dot at which will be active so if i save and if i inspect that so that's the tooltip and whenever i will hover it as you can see that we have this active class here so let's actually a style with this active class so for now as you can see that in the initial state the opacity and the event so pointer event is actually none and whenever we will have the active class in the our tooltip we will remove it so sorry we will make the opacity one and the pointer event all so to make it so as you can see that here we can say something like tooltip dot active double o here so tooltip dot active means whenever we will have the active class in our tooltip div what i wanna do i wanna go to the tooltip content so let's say that tooltip content and the opacity will be back to the one and also pointer event will be all now you can see that it's working so for initial state we don't have the content but whenever we will hover it we have the content perfectly so let's actually remove it so for that what i can do actually whenever we will go outside of our pin we want to remove this active class so that's why we will not have the opacity one whenever we will go to the outside of the pin so basically which will remove the tooltip content so let's come here in our jazz so let's say that we will have another even listener in the pin so pin dot add even listener which is actually the mouse out or you can say the sorry not mouse out it will be leave so mouse leave that's the event whenever we will leave the mouse from our this pin what i wanna do i wanna call a function so this function arrow function where i will just remove the class so instead of add i will say that remove so now whenever i am just hovering it we have it whenever i am just out from the pin it will remove it so let's say that i don't wanna remove the content instantly so i wanna stay at time so let's say that after the one second or point five second i wanna remove it so cut it and for that i can say something like constant not constant let's actually declare it here with a led variable so let time id so time id or you can say something like timeout id so timeout id so that's the timeout id so and here let's call the timeout id and in this timeline id i will have time out actually so set timeout and in the set timeout i wanna have the one thousand millisecond that's me in the one second so after the one second we will run this arrow function here that you can see that i'm creating so in this error function i just remove the class so let's copy that and paste it here and remove it so now if i save as you can see when i am hovering we have this whenever i will remove so as you can see that it will wait 1 000 millisecond means one second then it will remove the class habit one second wait and remove it so looking good so let's also do one more thing here so let's say that whenever we will actually hover the content here so that's the content so whenever we will also hover that we wanna show the content div so now you can see that whenever i am hovering this it's not having or it's not showing the content because we actually made the functionalize for the pin so whenever we'll hover the pin we will see it otherwise we can't see so let's actually do it for also the content div itself so to make it i can say something like here the content so content dot add even listener and here i can say something like same thing that we did here so mouse move and here what i wanna do actually i wanna call a function so whenever we'll hover this content i wanna also add the class here and save it and also whenever we will leave it so as we did here we wanna remove the class so just paste it and instead of pin let's say that content so now if i hover the content it should esteem so as you can see that i am hovering the content but it's not a stain so because whenever we are move out from our pin as you can see that when we mouse leave from the pin it will wait once again and it will remove the glass so let's actually stop this thing whenever we will move to the content so to stop that what i can do actually i can say something like clear timeout so i want to clear a timeout so which one i want to clear the time mode of timeout id so this one so let's pass the timeout id and save it so now whenever i will hover it as you can see that we have the content and whenever i will also hover the content it's already showing the content it's not removing as you can see because what i am doing here i am clearing the timeout and adding the class also here so now it will be perfectly fine as you can see that we are now hovering this content and it is perfectly staying in the window it's not removing or hiding but whenever we will outside of the content it will wait one second and remove itself also what you can do actually instead of mouse move you can do something like mouse over so if i save now you can see that we have it and also we have it here and we don't have it now we have now we don't have now so now you can see so that's up to you what you want to use so let's actually mouse over yeah mouse mouseover is working perfect so now we have a basic tooltip that we have here as you can see so let's actually change the position of our tooltip so in our style here so let's come here and let's keep a comment here so let's say that custom style for tooltip one so that's the customer style for the tooltip one where i can say something like tooltip one and i wanna change the position of the pin so let's call the pin class and here let's say that i want to position it somewhere here so that i can see the responsiveness of the pins so let's actually position it right here so i can say something like left will be about 90 percent if i refresh i should see the tooltip here so now you can see that it's working perfectly fine but we have a responsive issue here so as you can see we have this responsive issue going on so let's actually fix it so in our jazz here as you can see that that's where we are positioning the content so let's actually check it so here let's actually check a statement here so let's say that the pin dot offset left plus the content so content dot offset width divided by 2 is bigger than the width of our full dip so if it is go outside of this full dip that's what we are checking so i can say that full dip dot offset width so if it is going outside of our full div width i wanna console.log something so console.log let's say that right conflict so now if i save console log here so we having the right conflict here going on but whenever we will go something like that should we have still the right conflict so now as you can see now we don't have the right conflict anymore but we will go to the smaller device now we are having the right conflict as you can see that now it is 14 so before it was four and when we go to the mobile device it's now 14 and so let's actually fix it so whenever we will have the right conflict so let's actually calculate the extra left that we have here so let's say that extra left extra left so that's the extra left we will calculate automatically or dynamically so how we will calculate it so basically what i will do actually i will subtract the full of our width from the full div width so i can say something like full leaf dot offset width so offset width so minus from that what i wanna subtract i wanna subtract the pin left plus content half width so if i copy this and paste it here so that's the extra left that we have here what i wanna do now i wanna add this in our this content style left here so let's actually say that content just copy this i don't wanna need this anymore here so just copy this and as you can see that left and that's all other thing that we have here that's the default one so whenever we will have the right conflict what i wanna do actually i wanna also add these extra left with our left so extra left that we need now here making the default one so actually let's cut it and say that else and paste it here so if we have the right conflict we will use this left else we will use our default left okay that's what i'm saying so if i save and now it should work now what i can do actually in our section i can say something like overflow x will be hidden so now we don't have it and we have our content here so let me just check the responsiveness now you can see that we are perfectly have the responsiveness as you can see so now you can see that it's not going outside of the window it's always staying inside of our window so looking good for now we fixed our responsive issue for the right conflict so let's create another one so let's create a new tooltip so let's actually copy this one so we have this tooltip just copy this and let's actually change the position sorry so let's actually change the class name it will be tooltip 2 and hello tooltip 2 so if i save and that's our tooltip too as you can see here so we don't need to do anything else we just need to specify the class name and also the content if you change the content so now what i need actually i need to change in the position let's actually check the left conflict if we have any kind of left responsibility so in here let's actually say that custom style for tool tip two and here what i need actually tooltip to dot pin so i wanna change the pin position so in the top it will be something like 40 percent and in the left it will be something like ten percent okay so as you can see that that's in the left side and it is from the top forty percent so if i hover it we have perfectly this tooltip here so now as you can see that we have issue whenever we are moving inside of our this tooltip we don't have any kind of content because here we just see that mouse over so let's actually keep it mouse move actually see instead of this i will say that mouse move so as you can see that it's working perfectly now good so let's actually check the responsiveness for the left conflict so whenever we will go to the smaller device and if i do that as you can see that we have a problem so the tooltip have a left conflict here it is going outside of the window in the left side as you can see so let's actually fix it here so for that here let's create a if statement so i will just get it here and here what we will check so we will check it for the left side so for the left side what i can do now i can say that pin dot off the test so that's the offset left and if the offset left means from here to the pin and plus this amount of space so which is actually plus container dot offset left so with that saying what i am doing actually i am actually calculating this whole amount of distance as you can see here and if it is smaller than the width of our content content dot offset width sorry offset width here so if it is smaller than our content width actually not the full content width actually if it is half of our content width so what i'm checking here is if our this amount of distance is smaller than the half of our content width so it should have a left conflict so let's actually console log the left conflict here so left conflict so if i save and if i open the console log here so now you can see that we have a right and left complete so right for the first one and left for this one so let's actually fix it so when we will have this left conflict what do i want to do so let's say when we will have these left conflict i can say something like content so i want to change the content left actually so content dot left so when we will have the left conflict the content will start from the left zero so i can say for that i can say minus content sorry not content container because that's the whole container that we have here container dot offset left pixel so when we will have the left conflict we will start the div from this amount of space so it will start from the div it will go here so it will not go outside of the div because it will start from the left 0 actually so now if i save now you can see that it's starting from the left 0 it's not going outside of the left now looking good as you can see that the left conflict is fixed it is now perfectly responsive as you can see that so that's looking really good now you can see that the left conflict is fixed and the right conflict is still fixed you can see that we have a little issue in the right side did a mistake here so as you can see that we have if a statement after that we have another if so that's not the if it will be the else if and also we have a mistake here so it should be the style so if i give it a style it will start from the left 0. so now if i save now it's starting from the left 0 working fine for now so we have problem in the right side actually you can see that it's going outside of our window so let's actually fix it so we are having this problem because we have a parenthesis here so let's actually remove this parenthesis from here actually if i remove that so it should work as you can see that we have this perfect responsiveness going on here and also going on here so after that let's actually create those pin for our shop so let's actually let's say that it will be in the pin one so let's say that in the pin one the position of the pin will be left 82 and also let's say that top 40 so it will indicate the lamp as you can see and if you want you can change the height and width of our pin so let's say that height will be 15 pixel not 16 let's make it 15 and also let's say that the width will be also 15 pixel so now you can see that it is kind of a small here and that's our pin and we have this so after that let's actually change the content for our these two tip one so in the tooltip one we will have this content div after the quantity we have the arrow and after that we will have our own thing so let's actually create an image tag here so after the arrow i will have a d with a class of img and in this img i will have actual img here so img two let's say that that's the image i want to have so for the content each will remain at it is and actually let's have a button where i would say that by now something like that and actually let's give it a price of 199 so if i hover now as you can see that that's working perfectly fine so let's actually install it so here in our pin one customer style we can style our content for the pin one so let's actually let's say that tool tip one so 2d one dot tooltip content and here let's actually display flex and max width let's say that i want to change the max width also so max weight will be about 500 pixel so after that let's actually say that align items stretch and after that justify content will be center and padding will be also zero i don't want any kind of padding and background color will be allies blue so now if i save i can see the style here no it's not the style because we have a problem here so now we should see the style as you can see that it's now displaying flex perfect so after that let's come to the image so before that tool tip one and let's say that if i have a active class in the tooltip one i wanna change the tooltip content and make it display flex also and after that let's say that tooltip one dot tooltip content dot image div so that's the div where we have the image and the width of the div will be something like 50 percent and the object will be object fit cover so now we will have the image perfectly researched inside of our content and after that let's actually grab the actual content so tooltip one and tool tip content and inside that i have the actual content here so in the content i will say that width will also have the 50 and also let's say that the padding will be about 20 pixel so now if i hover it it's looking good for now so after that let's actually style the h1 and all the other things so for that i can do something so let me copy the style so i don't want to write this one by one so just copy and paste it so here as you can see that i have a h1 style which i just say that font size will be 24 pixel and background font size will be 14 pixel and we have a button here which is this one and we just give it the font size and uh some specific style here as you can see that box shadow and radius and all other things and that's it and if i see as you can see that it's working perfectly so basically in our content div under the content here so where was the yeah so basically after this tooltip content we have this tooltip arrow so after that arrow you can do anything so there is no limit you can do anything and these will show inside of your tooltip as you can see here so actually it's looking good and let's actually check the responsiveness so if i come to the mobile device so if i see so as you can see that in the mobile device it's not looking that good so let's actually make it responsiveness for our mobile so it's up to you so let's actually create a keyframe so i will just copy it and paste it here so that's a basic style as you can see that however we will go to the mobile device what i am saying it so the flex direction will be column so now it is in the row it whenever i will apply it it will come to the column means we will have the image and after that we will have our text so and we said that the width will be 100 now we have the 50 for the image 50 percent for the text after we will go to the mobile it will be 100 for the each of them so now if i save i should see something like that and if i refresh it will be perfectly in its place as you can see so that's it as you can see that it's working really good so let's also check the responsiveness as you can see that the responsiveness is really amazing so that's it so before we end the video let's actually add another tooltip so to create a new tooltip now what you need to do actually you need to copy this and duplicate or let me show you what you need to do so to create a new tooltip for now what you need to do is you need to create a div inside of your all tooltips deep so the div will have a class of tooltip so this will have the all the default style that we did and for the specific style we will can do something like tooltip 3 so now sorry tool tip 3 so we will have this class and after this we will have a div with a class of pin so this will make sure that we have the pin and after the pin we will have a div with a class of tooltip content so tool tip content and in this content i will have another div with a class of arrow and after this arrow you can do anything so let's say that i wanna say h1 of hello world and sorry now as you can see that that's only what you need to do create a new tooltip if you want you can do uh so you can do anything for your content i just said h1 only now you can see that that's our third tooltip and it is in the perfectly placed and let's actually check the responsiveness so let's actually place it in the left side of the corner and here let's say that custom this so so that's the 2t3 for that i just can say something like tooltip 3 dot pin i just need to position the pin so let's say that position it in the right side of the right corner so i just can say that left will be 99 percent and top will be zero percent as you can see that in the corner we have our content if i refresh and hover it as you can see that it's perfectly placed and it is responsiveness and you can see that the responsiveness is automatically added as you can see that the arrow is moved to the right side as you can see here so according to our position so let's actually make it in the five percent of our left so let's see the left responsiveness and make a refresh here and as you can see that now it is automatically moved this arrow in the right side sorry in the left side because we have a responsive issue in the our left side of the arrow so as you can see that it will move automatically you don't need to worry about anything and that's it as you can see we have it and also we have this so that's it you can do anything now you can have the ultimate responsive tooltip for your website so that's it for this video i hope you like this one and if you do please give it a thumbs up and don't forget to subscribe the channel and my name is arfan and i will see you in the next video till then bye bye kuda hafez you

Channel: WEB CIFAR

Views: 6,675

Keywords: tooltip with image, infobox, dynamic content, css tooltips, tooltips, css tooltips tutorial, tooltips tutorial, tooltip, css tooltip, tooltip tutorial, css tooltip tutorial, tooltip web, tooltips css tutorial, css only tooltips, tooltip html, tooltip javascript, tooltip js, tool tip, tool tip tutorial, tool tip css, tooltip html tutorial, tooltips html, tooltips html tutorial, tooltips javascript, image hotspot, hotspot, image hotspot with html css, web cifar, shaif arfan

Id: e_jEquJo7y8

Length: 55min 52sec (3352 seconds)

Published: Tue Aug 11 2020