[Pro] Tooltips?

What’s the best (and/or easiest?) way to implement tooltips in Freeway Pro? My designer will no doubt want to style them-so maybe there’s more to implement that.

I’ve checked out http://www.communitymx.com/content/article.cfm?page=1&cid=4E2C0 as recommended. There is no date on this article and the examples didn’t work using Firefox 12.0-so not sure what information to trust here.

I don’t see any actions regarding tooltips either. Except, the Fix IE Alt Tags project.

Thanks for your help and continuing education of the masses.

Jan


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

This one does use jQuery so should be used with caution and preferably not mixed with the FW script/protacous based actions.

http://www.deltadesign.co/fw_examples/jQuery/jquery-tooltip.html

David


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

Here’s a basic implementation of tooltips with Protaculous. You have your choice of fading tooltips or quick-flashing tooltips. The effect will apply to any link that has a Title attribute applied to it, so you first need to edit each of your links that you want to have the effect, and use the Hyperlink dialog to add a Title attribute.

Apply Protaculous to the page, choose prototype-packed as the library, and paste in the following in the top Function Body dialog:

$$('a').each(function(elm){
	var title = elm.readAttribute('title');
	if(!!title){
		elm.writeAttribute('title',null);
		elm.setStyle('position:relative');
		var tip = new Element('span',{'class':'tooltip'});
		tip.update(title).hide();
		elm.insert(tip);
		elm.observe('mouseover', function(evt){
			tip.show();
		});
		elm.observe('mouseout', function(evt){
			tip.hide();
		});
	}
});

If you want the cool-o fade in and out, then change the Library picker to scriptaculous-packed and paste in this code INSTEAD:

$$('a').each(function(elm){
	var title = elm.readAttribute('title');
	if(!!title){
		elm.writeAttribute('title',null);
		elm.setStyle('position:relative');
		var tip = new Element('span',{'class':'tooltip'});
		tip.update(title).hide();
		elm.insert(tip);
		elm.observe('mouseover', function(evt){
			tip.appear({duration:0.4});
		});
		elm.observe('mouseout', function(evt){
			tip.fade({duration:0.4});
		});
	}
});

Finally, open up the Page / HTML Markup dialog, move to the Before section, and paste in the following CSS:

<style type="text/css" media="screen">
	.tooltip {
		position:absolute;
		z-index: 1000;
		background-color: #333;
		color: #fff;
		text-decoration: none;
		bottom: 2em;
		left: -50%;
		width: 100px;
		padding: 3px 8px;
		font-size: smaller;
		border-radius: 8px;
	}
	.tooltip:after {
		content: '';
		position: absolute;
		display: block;
		top: 100%;
		left: 50%;
		margin-left: -8px;
		border: 8px solid;
		border-color: #333 transparent transparent transparent;
	}
</style>

Your designer can tweak the color of the tip, the radius of the corner, and if you don’t want the little triangle pointer, you can simply remove the second rule, as it generates that out of thin air.

Stepping through, what this trick does is memorize the existing title attribute, then delete it. Next, it makes the link into a CSS-positioning “anchor” with position:relative. Next, it creates a span inside the link containing the memorized title attribute, and sets that element to be initially visible. Finally, it sets up two observer functions on the link, so that the mouseover will cause the tooltip to appear, and the mouseout will cause it to hide.

Hope this helps keep you out of the jQuery woods for another while.

Walter

On May 23, 2012, at 1:35 PM, DeltaDave wrote:

This one does use jQuery so should be used with caution and preferably not mixed with the FW script/protacous based actions.

http://www.deltadesign.co/fw_examples/jQuery/jquery-tooltip.html

David


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


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

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


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

Walter,

THANK YOU! I am anxious to try this out. I don’t like mixing with JS in Freeway.

Will DTP2’s method (see below) also not mix well with Protacous actions?


DTP2.

I found these instructions at your link:

To make your website even more attractive you can add tooltips to highlight parts that you think are important and deserve a bit more attention from the visitor.

To do this we use a bit of code called Unitip and we need to add a bit of code to your Freeway Pro project.

Here we go!

Download the unitip zip file here Download
Unzip and upload this folder to the root of your website

Make sure all the read/write rights are ok for the folder and it’s contents (CHMOD). Mine are 755.

Go to your Freeway Pro project
On all pages you want to use this effect go to Page / HTML Markup / Before paste the following code:

Change www.yourwebsitesurl.com into your websites url

Now go to the item on that page you want to apply the tooltip to

Right click, choose extended and click new

In the field name fill in class

In the field Value fill in tool and click ok

Make sure the item you want the tooltip to be applied to is selected and go to the Inspector Palette

Go to the third tab and make sure the ALT text box is activated

The text you type in this ALT text field will be the text used for your tooltip

Upload your Freeway Pro project to your web server and it should be working


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

I’m too uninspired to create an example, but this sounds like a good start
to a completely CSS approach to your area of interest…


Ernie Simpson

On Thu, May 24, 2012 at 12:46 AM, jan smoot email@hidden wrote:

Walter,

THANK YOU! I am anxious to try this out. I don’t like mixing with JS in
Freeway.

Will DTP2’s method (see below) also not mix well with Protacous actions?


DTP2.

I found these instructions at your link:

To make your website even more attractive you can add tooltips to
highlight parts that you think are important and deserve a bit more
attention from the visitor.

To do this we use a bit of code called Unitip and we need to add a bit of
code to your Freeway Pro project.

Here we go!

Download the unitip zip file here Download
Unzip and upload this folder to the root of your website

Make sure all the read/write rights are ok for the folder and it’s
contents (CHMOD). Mine are 755.

Go to your Freeway Pro project
On all pages you want to use this effect go to Page / HTML Markup / Before

paste the following code:

Change www.yourwebsitesurl.com into your websites url

Now go to the item on that page you want to apply the tooltip to

Right click, choose extended and click new

In the field name fill in class

In the field Value fill in tool and click ok

Make sure the item you want the tooltip to be applied to is selected and
go to the Inspector Palette

Go to the third tab and make sure the ALT text box is activated

The text you type in this ALT text field will be the text used for your
tooltip

Upload your Freeway Pro project to your web server and it should be working


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


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

I am pretty sure that Unitip is framework-agnostic. I should mix well with others.

Walter

On May 24, 2012, at 12:46 AM, jan smoot wrote:

Walter,

THANK YOU! I am anxious to try this out. I don’t like mixing with JS in Freeway.

Will DTP2’s method (see below) also not mix well with Protacous actions?


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

This is a very cool approach, and makes me realize that my technique could be extended to use it. To be clear, my approach currently uses JavaScript both for the unobtrusive setup and for the effect triggering. The latter is not really needed, as a CSS :hover pseudo-class can do that just as well. Even the fade-in-out can be done in CSS, given a suitably modern browser.

Walter

On May 24, 2012, at 1:31 AM, Ernie Simpson wrote:

I’m too uninspired to create an example, but this sounds like a good start
to a completely CSS approach to your area of interest…
Creating Sexy Tooltips with Just CSS | WebFX


Ernie Simpson


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

I’ve only use tooltips once and wrote myself a guide to remind me how to do it.

www.guide.rediwebhosting.com/using-tooltip-in-your-freeway-website-pages/

These other methods might be a better option now though especially using only CSS.

Al…


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

Ernie-

I am liking the CSS approach. The tutorial was really helpful. Thanks for the link.

Walter. Let us know if you have any further insights!

Thanks a lot.


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

Here’s an example, and the doc to create it. This uses Protaculous and a bit of hand-coded CSS in the Before /HEAD section of the Page / HTML Markup to do everything. It applies automatically (and unobtrusively) to any link or anchor on your page that has a non-empty Title attribute.

Experts: you can alter the style of the tooltips using the CSS (be sure to get the background-color of the .tooltip and the border-color of the .tooltip:after and .tooltip.below:after to match). If you modify the dimensions of the little triangle (using the border-width of the :after pseudo-class) be sure to do the math in the JavaScript to compensate.

Walter

On May 24, 2012, at 6:13 PM, jan smoot wrote:

Ernie-

I am liking the CSS approach. The tutorial was really helpful. Thanks for the link.

Walter. Let us know if you have any further insights!

Thanks a lot.


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


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

Hi Walter,

you can alter the style of the tooltips using the CSS (be sure to get the background-color of the .tooltip and the border-color of the .tooltip:after and .tooltip.below:after to match). If you modify the dimensions of the little triangle (using the border-width of the :after pseudo-class)

Do you mean we’d have to add an extra css file for this or where to set those tags?

bw, OKN


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

Do you mean we’d have to add an extra css file for this or where to set those tags?

Modify the CSS styles in the Before end section.

David


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

If you download the example doc, I put those styles in the Page / HTML Markup, in the Before /HEAD slot. You could certainly also use the Styles palette to create those styles (with many trips to the Extended sub-sub-sub-dialog) but this was quicker for me to iterate and fix. Even better would be to use the External Stylesheet Action to apply a sheet coded in CSSEdit or Coda (or another fine WYSIWYG CSS tool) to your page or pages where you use the effect.

Walter

On May 26, 2012, at 3:00 AM, OmarKN wrote:

Hi Walter,

you can alter the style of the tooltips using the CSS (be sure to get the background-color of the .tooltip and the border-color of the .tooltip:after and .tooltip.below:after to match). If you modify the dimensions of the little triangle (using the border-width of the :after pseudo-class)

Do you mean we’d have to add an extra css file for this or where to set those tags?

bw, OKN


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


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

If anyone is unsure about adding the Tooltip and what to edit, I have just put together a quick walkthrough using Walters instructions here -

http://rediwebhosting.com/freeway-tutorials/tooltip-in-freeway-website-using-protaculous.html

Hopefully that should help if you want to keep things simple and don’t want to start adding styles via another method.


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

This is all so cool and well-done, thanks a lot guys!

/ Omar KN


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

There are still two things I’m worrying about:

1.) If there are to be 2 Protaculous functions, how to add them so they don’t break,
for ex. I’d have 1 for toolpis and 1 for Text Scroll.

(
2.) I’d like to style the tooltip anchor differently from a normal anchor: I saw this somewhere, the link not just underlined but the whole word had a rounded, coloured background.)

(I’ll move this second question to a new thread)


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

  1. If both sets of code require Protaculous, just add them to the same, single application of the Action. Paste them into the relevant Function Body editor, separated from any others with a couple of line-breaks.

Walter


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

Hi Walter,

Tooltips really provide enhanced usability…

Now I’d like to set the little triangle pointer not in the middle, but more toward the left bottom corner.

(Because then the pointer would be above the tooltip-word,) (right now it is above the second or third word after.)

(It is not something which breaks my page,)
(so it’s not critical.)

How could this be done?

/bw, Omar K N


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

Can you post a link to the page, showing what you’re seeing?

Walter

On Jun 23, 2012, at 10:39 AM, OmarKN wrote:

Hi Walter,

Tooltips really provide enhanced usability…

Now I’d like to set the little triangle pointer not in the middle, but more toward the left bottom corner.

(Because then the pointer would be above the tooltip-word,) (right now it is above the second or third word after.)

(It is not something which breaks my page,)
(so it’s not critical.)

How could this be done?

/bw, Omar K N


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


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