I havevisualstudiocodeopen, and I havejust a verybasicamountofinformationdonesoit's openupwhatwehaveinlifeserver, andyoucansee I havethatcatimagein a circle, and I justhavereallybasicstylestomakethatcircleimageinthecenterofourscreen.
Thishasnothingtodowiththetooltips, so I'vealreadywrittenitout, andwehavethatsingleDIV, whichcontainsthatcatimage.
Butbefore I getstarted, I wanttomentionthat I haveanentireCSScoursethatislaunchingthedaythisvideocomesout.
Soifyou'rewatchingthis, thecourseislive.
Andfortheveryfirstweekofthatcoursebeinglife, I'm givingeveryone a hugediscount.
Somakesureifyou'reinterestedinlearningmoreaboutCSS, youcheckoutthatcourselinkedinthedescriptionwithinthefirstweekofthisvideo, comingoutfor a discountonthecourse.
Nowbacktothisvideoif I goovertoourstylesheetandhere's wherewe'regonnaputallofthecoatforCSS.
And I wanttojustgivethis a littlebitof a height, whichisjustgonnabe 25 pixelsandsomewithalsogoingtobe 25 pixelsandwe'lljustputinhere a background, whichisgonnabeblack.
Andall I wanttodoischangeourtransformtoincreaseourscale.
Soit's create a CSSvariable, coldscale, andbydefault, we'regonnasetourskilltozero, becausewhenwe'renothovering, wedon't wantthistoscale.
Butwhenwedo, however, wewanttochangeourscaletoeone.
Soessentiallyitsscalesallthewayuptothefullsizeandtheninsideofourtransformwhat's justcomeinhereandput a scalewhichisgonnabeequaltothatscalevariablejustlikethat.
Andnowif I saveandhover, youcanseeourelementpopsup.
Butrightnowit's notbeinganimated, Sotoanimated.
Wejustneedtoset a transition.
We'regonnaset a reallyquick 50 millisecondtransitionandwe'regonnausethetransformedpropertyandnowwehover.
Youcanseethiselementanimatesintoplaceif I makethis a littlebitlonger.
Soit's easytosee.
Youcanseewehave a nicehoveranimationwherethisisgoingtopopup, growandthenshrinkwhenweuncover.
Andnowifwesaveandhover, youcanseeourtooltipgrowsfromthetopofourimageupwardsinsteadofdisappearingfromthecenter, which I thinklooks a lotbetterwhenitcomesto a tooltip.
Now, technically, thatis a completetooltip, butalmostalwaysyou'regonnawannahaveanarrowpointingatthethingthatyou'remaking a tooltipfor.
Andfornow, I'm justgoingtogivethis a widthof 10 pixels, a heightof 10 pixels, andwe'regoingtogiveit a backgroundcolorofblackandmakesurethatweactuallychangeourscaleonthisbygoingappearinsanedotHaveattire.
Soinordertopositionouraerowherewewantittogofirst, let's takethisbordersizehereandturnthisinto a variablewhichwouldhavecalled a rowsizethatwecanuseitalloverapplication.
Andinsteadofdefining a defaultvaluefortranslate, whywe'rejustactuallygoingtodefineherearevariable, whichinourcaseisgoingtobetranslatewhyandwhatisgiven a fallbackvalueofzero.