[Pro] mouse over to get bubble for text (how to?)

Hi,

I wanted to know if anyone can tell me if there is a fairly easy way to have someone mouse over my 24 icons and when they mouse over each one, a little bubble comes from the icon telling what it is about?

I was going to use target show/hide layer and have the text appear somewhere else on screen but space is at a premium and thought maybe the bubble thing could be cool and save space.

Any advice?

Thanks,

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is one that uses jQuery http://www.deltadesign.co/fw_examples/jquery-tooltip.html

But if you are using FW’s native actions on the same page beware as they don’t play well together.

This one uses CSS3 properties as well as jQuery so not good for older IE versions http://deltadesign.co/fw_examples/css3tooltip.html

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And this one uses a bit of javascript code and CSS but untried with FW actions http://www.deltadesign.co/examples/slider2.html

Mouse over the guys in the back row.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Dave.

Way way way above my head (for now)…

Appreciate it though,

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 4 Mar 2012, 12:30 am, DeltaDave wrote:

And this one uses a bit of javascript code and CSS but untried with FW actions http://www.deltadesign.co/examples/slider2.html

Mouse over the guys in the back row.

D

Hi Dave, can you tell a little bit more on how you achieved this one?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Download the unitip stuff here http://deltadesign.co/fw_examples/Resources/unitip.zip

Then a reference to the unitip.css and the unitip.js in Page>HTML Markup before end head section

<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/unitip.css" />
<script type="text/javascript" src="http://www.yoursite.com/unitip.js"></script>

Then in my example I have added the class:tool to item extended of the Img that has the link and the Alt text of that image is used as the tooltip text.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On this page (http://www.albaprint.nl/) on the Full color prints button I tried as described.

I uploaded the unitip folder to my root.
I put the reference in my before /head section.
I changed the url’s in the reference to match the path on my website.
I added class:tool to the images in Extended.

So I think I’m nearly there, but since I do not see the effect I think I need a little more help.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It seems that both the script unitip.js and the stylesheet unitip.css won’t load due to owner-restrictions (error 403, forbidden)

Richard

On this page (http://www.albaprint.nl/) on the Full color prints button I tried as described.

I uploaded the unitip folder to my root.
I put the reference in my before /head section.
I changed the url’s in the reference to match the path on my website.
I added class:tool to the images in Extended.

So I think I’m nearly there, but since I do not see the effect I think I need a little more help.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 5 Mar 2012, 10:19 am, Richard van Heukelum wrote:

It seems that both the script unitip.js and the stylesheet unitip.css won’t load due to owner-restrictions (error 403, forbidden)

I’ll take that back … they’re just not to be found on the given paths.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You may find some useful info here
http://www.freewaytalk.net/thread/view/72362#m_72634

Walter and Dave led me to a result when trying to get this to work (and see also the comment from Marcel re alt text)

On this page (http://www.albaprint.nl/) on the Full color prints button I tried as described.

I uploaded the unitip folder to my root.
I put the reference in my before /head section.
I changed the url’s in the reference to match the path on my website.
I added class:tool to the images in Extended.

So I think I’m nearly there, but since I do not see the effect I think I need a little more help.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes the tooltip text appears but the images that colour the background so you can see the light coloured text are not available.

Check your paths again.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ahhhh!!, I changed the location of the images and changed the path to the images to everything it can be (absolute, relative etc) but still the images are not showing. Is there any other location than the CSS file where I should change the path to the images?

Please a little more help, I’m nearly there.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, this morning someone with a lot more skills checked what was wrong. The unitip folder and it’s subfolders has some issues with read/write rights. Now I point everything to the Resources folder and now it works.

Thanks for all the help guys!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah, my first conclusions exactly :slight_smile:
You’re welcome!

On 6 Mar 2012, 9:10 am, DTP2 wrote:

The unitip folder and it’s subfolders has some issues with read/write rights.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hoi Richard,

Inderdaad en dank je voor de tip.

Because this thread and the other one I was directed to contain a lot of important and scattered information I decided to put all the steps into one tutorial on my website. I hope this makes sense and can help others to achieve this effect too, but a bit faster and easier :slight_smile:

http://www.dtp2.nl/tooltip-freeway-pro.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

DTP2

thanks so much for this. Seems much easier to follow now.
Hope i get it.

p.s. can this be done BEFORE the site is ready for upload (live)?
I am still building it.

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, you can prepare everything before you go live. The only thing is that you can not see it working, because for that it needs the website to be in the same folder the unitip folder is in (the root) and where the code is pointing at.

Good luck!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

great to know- I will wait until up and running to add those in.

cheers,

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

DTP2

are you around to ask a question? (unitip)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes I am. info at dtp2 dot nl


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options