Transcript

00:00 hello everyone this is Joe workman and
00:02 today we're going to go over the new and
00:04 exciting tip tip stack we're going to
00:06 give you a brief overview and then dive
00:09 into how to set it up so let's get
00:11 started so here we are at the tip tip
00:15 test site and this site was created
00:17 using the rapidweaver file that actually
00:19 ships with the tip tip stack see that
00:23 way you can play around and see exactly
00:24 how I've done it here so what is tipped
00:28 it basically tip tip allows you to add
00:31 and override the browser's tool tip with
00:36 a very nice and elegant tool tip box
00:39 that's done completely in JavaScript and
00:41 CSS that means there's no images here
00:43 you have complete control over the look
00:47 and feel the colors the borders the
00:49 shadows the boldness of the font the
00:53 size of the fonts so on and so forth as
00:56 you see you can easily integrate this
00:59 with existing links and using the tip
01:02 tip enclosure stack that also comes you
01:05 can also add a tooltip to whatever you
01:08 add inside the tip tip container or the
01:11 tip tip enclosure stack in this
01:14 particular site I added an image so i
01:17 could easily whenever I over hover over
01:19 this image or this box really the
01:22 tooltip shows up at the bottom or if we
01:25 see no matter where the image is if I
01:27 hover over it now it dynamically goes to
01:29 the top okay that's a very nice feature
01:32 of this now an exciting thing is we also
01:36 have integrations with in with the RSS
01:38 stacks that were recently released and
01:41 with those whenever you hover over your
01:43 particular RSS stack you will then get
01:46 the date as well as the short
01:48 description for your RSS blog post okay
01:51 so that's really exciting this is a
01:53 really cool feature again you can
01:55 customize the look and feel of that and
01:57 this is a really easy to implement well
02:00 that is the tip tip stack everybody and
02:03 let's go ahead and dive into the
02:05 configuration of it so here we are in
02:08 the sample tip tip stack file they get
02:11 shipped with the stack itself
02:13 and let's just dive in this and actually
02:15 look at how it is done okay so as you
02:20 see here for this particular top link if
02:24 we were to edit that you will see that
02:27 we've added two things to this one thing
02:30 if you didn't notice click on this
02:33 custom attributes and you need to add
02:35 two attributes for your link first you
02:38 need to add a class make that a value of
02:41 tip tip and then you add your title and
02:44 the contents of this title is actually
02:46 they going to be the contents of your
02:48 tip tip tooltip okay so let's quickly
02:51 let's just go ahead and replicate that
02:53 right really quick so I've gone ahead
02:56 and created a blank stacks page let's go
02:58 ahead and drag out the tech stack and
03:01 let's drag out our tool tips that are
03:04 tip tip stack now all we need to do here
03:08 is go ahead and highlight whatever text
03:13 we want to create our link for go down
03:15 and hit the link button that will open
03:20 up your your link box go ahead and enter
03:24 in a URL let's go ahead and just enter
03:27 it in Joe workman net title let's just
03:31 do
03:44 and we're going to make it class is
03:48 going to be tip tip and basically you
03:51 click set link let's go ahead and
03:54 preview that now if I hover hover over
03:58 the link we have our nice tool tip our
04:01 tip tip couldn't be couldn't be easier
04:05 it's very simple let's just go over the
04:08 the actual configurations the settings
04:11 for the tip tip so as you see here
04:16 inside of our settings HUD you have the
04:19 ability to change the font size the
04:22 color of the text the background color
04:25 and also the gradient now what that
04:28 means is if you want the tip tip to be
04:32 one full color and not have a gradient I
04:35 recommend making these both the same
04:37 exact color that way it's just fluid
04:41 however if you want it to have a
04:44 gradient the background color will be
04:46 the top color they and then it will
04:47 slowly fade down to the gradient color
04:50 at the bottom with a tip tip okay then
04:53 you have your border color for the
04:54 border around the tip tip then you have
04:57 your box shadow which is the shadow
04:59 beneath the tooltip we also have some
05:04 shadows on the text and you customize
05:07 the color of those shadows as well and
05:09 then with this check box you can
05:11 actually turn on and off the text shadow
05:15 if you did not want the shadow on your
05:17 text you can easily turn that off and
05:19 finally with this check box you can
05:21 actually have bold text or not bold text
05:24 okay now let's go ahead and and look at
05:30 the tip tip enclosure the tip tip
05:32 enclosure stack is a really simple
05:33 concept basically you dragged out and
05:36 you have an empty box and basically
05:39 whatever you dragged into that box then
05:42 gets your particular tip so if we were
05:46 to just insert a quick image in here so
05:48 I now have an image stack inside of my
05:51 tip tip enclosure
05:53 we will see that this will generate a
05:55 tip tip whenever I hover over this
05:58 entire tip tip enclosure so it's not
06:01 just the image it's if I hover over
06:03 anywhere inside the enclosure that tip
06:06 tip will then be activated so the
06:10 settings for the tip tip enclosure are
06:11 very simple basically all you have to do
06:14 is configure your your text that you
06:17 want inside of the tip tip okay and
06:21 that's basically it lastly I wanted to
06:25 mention the RSS stack integration the
06:28 RSS stack integration is really cool as
06:30 you see here I have two of my RSS stacks
06:32 here there are a total of six RSS stacks
06:34 available and inside with this
06:38 integration basically whenever you hover
06:39 over a link you will get the tip tip
06:43 integration automatically you don't need
06:45 to do anything else all you need to do
06:47 is drag have your RSS stacks there and
06:49 drag your tip tip stack onto the page
06:52 that's all you need to do once you do
06:55 that the integration will take care of
06:56 itself and you will now get these
06:58 elegant hover over tooltips for all of
07:02 your favorite RSS feeds and as you see
07:05 within the tip is the date as well as
07:08 the short description for your
07:10 particular blog post so these this is a
07:13 really nice integration with the RSS
07:14 stacks please have a look at the RSS
07:17 stacks you can see those at RSS Joe
07:20 workman net okay well that'll that wraps
07:23 up today's screencast and I hope you
07:26 really enjoy the tip tip stack I think
07:29 it's a really cool simple elegant stack
07:31 that you can really use all over the
07:33 place thank you very much everybody
07:35 bye-bye"}]