[Pro] Tooltips?

Freeway
21

Here is a link: @About this site (right column, word: Islam)

But it’s a minor detail, not really that important!

Otherwise, if the whole tooltip could be moved 60 px to the left…

/okn

On 2012-06-24, at 04:51 , Walter Lee Davis wrote:

a link to the page

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

22

Hi & good day Walter,

On top of the before mentioned issue (moving the tooltip 60 px to the left),

I tested with two other instances of the same tooltip (.tooltipanchor) further down almost at the bottom of the page,
and there the two tooltips are cut off 30 - 80%.

Has this maybe to do with the z-index layering, it seems some other layer (?) is above the tooltips?? (Should one increase the z-index, but how?)

Any assistance very welcome.

/
Omar KN

On 2012-06-24, at 05:15 , Omar KN wrote:

Here is a link: @About this site (right column, word: Islam)

Living Islam - Islamic Tradition

But it’s a minor detail, not really that important!

Otherwise, if the whole tooltip could be moved 60 px to the left…

/okn

On 2012-06-24, at 04:51 , Walter Lee Davis wrote:

a link to the page

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

23

That’s really strange. If you look at the examples that Dave made, you’ll see they don’t do that. Can you try again with just plain text in that box and a plain link – no styles?

Walter

On Jun 23, 2012, at 11:15 PM, Omar KN wrote:

Here is a link: @About this site (right column, word: Islam)

Living Islam - Islamic Tradition

But it’s a minor detail, not really that important!

Otherwise, if the whole tooltip could be moved 60 px to the left…

/okn

On 2012-06-24, at 04:51 , Walter Lee Davis wrote:

a link to the page

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

24

try again …

Me thinks it has to do with the OVERFLOW: HIDDEN setting of the PARENT layer/ DIV, in m y case (as it should be in an inline structure) the containing row.

http://mac.abc.se/home/onesr/frw/06/main2.html

Instances 1 and 2 work (OVERflOW : VISIBLE; against the rule)
Instance3 is OK (OVERflOW : HIDDEN) because there is enough space above, which is not in
Instance4a …

So this is how it is right now,
if Walter doesn’t venture along with his magic staff …

bw/ Omar K N

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

25

Yeah, this is a problem that I haven’t worked out yet. I think I started working on moving all of the tooltips into a new z-index: 1000 layer over the entire page, but then I may have put it aside for later. I’ll see if I can dig up the work again. This is non-trivial stuff, particularly if you want to ensure that a tooltip respects the edges of the browser window.

Walter

On Jun 26, 2012, at 4:49 PM, OmarKN wrote:

try again …

Me thinks it has to do with the OVERFLOW: HIDDEN setting of the PARENT layer/ DIV, in m y case (as it should be in an inline structure) the containing row.

http://mac.abc.se/home/onesr/frw/06/main2.html

Instances 1 and 2 work (OVERflOW : VISIBLE; against the rule)
Instance3 is OK (OVERflOW : HIDDEN) because there is enough space above, which is not in
Instance4a …

So this is how it is right now,
if Walter doesn’t venture along with his magic staff …

bw/ Omar K N

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

26

I’ve not ventured into this territory yet, but am curiously following it.

Do these tooltips respect css positioning? ( relative, absolute, etc )?

–
Ernie Simpson

On Tue, Jun 26, 2012 at 4:54 PM, Walter Lee Davis email@hiddenwrote:

Yeah, this is a problem that I haven’t worked out yet. I think I started
working on moving all of the tooltips into a new z-index: 1000 layer over
the entire page, but then I may have put it aside for later. I’ll see if I
can dig up the work again. This is non-trivial stuff, particularly if you
want to ensure that a tooltip respects the edges of the browser window.

Walter

On Jun 26, 2012, at 4:49 PM, OmarKN wrote:

try again …

Me thinks it has to do with the OVERFLOW: HIDDEN setting of the PARENT
layer/ DIV, in m y case (as it should be in an inline structure) the
containing row.

http://mac.abc.se/home/onesr/frw/06/main2.html

Instances 1 and 2 work (OVERflOW : VISIBLE; against the rule)
Instance3 is OK (OVERflOW : HIDDEN) because there is enough space above,
which is not in
Instance4a …

So this is how it is right now,
if Walter doesn’t venture along with his magic staff …

bw/ Omar K N

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

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

27

The way they currently work, they wrap the link with a span set to position:relative, then position the tooltip absolutely respective to that element. So it really doesn’t matter much where they appear in the document, although this overflow wrinkle has convinced me that I need to work harder on changing the basic premise.

In a “move everything to an overlay” approach, the elements would be positioned relative to their original parent, but using Prototype’s Element.cumulativeOffset() method to recreate the origin point within the overarching overlay. This would not respect a screen resize, so it would have to be run in a method that could be called whenever the window:resize event fired, too. None of this is enormously difficult, but it is not simple, either.

Walter

On Jun 26, 2012, at 5:22 PM, Ernie Simpson wrote:

I’ve not ventured into this territory yet, but am curiously following it.

Do these tooltips respect css positioning? ( relative, absolute, etc )?

–
Ernie Simpson

On Tue, Jun 26, 2012 at 4:54 PM, Walter Lee Davis email@hiddenwrote:

Yeah, this is a problem that I haven’t worked out yet. I think I started
working on moving all of the tooltips into a new z-index: 1000 layer over
the entire page, but then I may have put it aside for later. I’ll see if I
can dig up the work again. This is non-trivial stuff, particularly if you
want to ensure that a tooltip respects the edges of the browser window.

Walter

On Jun 26, 2012, at 4:49 PM, OmarKN wrote:

try again …

Me thinks it has to do with the OVERFLOW: HIDDEN setting of the PARENT
layer/ DIV, in m y case (as it should be in an inline structure) the
containing row.

http://mac.abc.se/home/onesr/frw/06/main2.html

Instances 1 and 2 work (OVERflOW : VISIBLE; against the rule)
Instance3 is OK (OVERflOW : HIDDEN) because there is enough space above,
which is not in
Instance4a …

So this is how it is right now,
if Walter doesn’t venture along with his magic staff …

bw/ Omar K N

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

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

28

I found my document, and realized that I had actually completely fixed it there. Not sure why I didn’t upload it. Here you go:

Tooltips and http://scripty.walterdavisstudio.com/tooltips/tooltips.zip

This works fine with overflow hidden or visible, because everything is moved out into the PageDiv, last in source order, and set to a very high z-index. Ah, wait, no, now that I think about it, this still won’t work if the page is resized. That must be why I didn’t upload it.

Well, food for thought anyway.

Walter

On Jun 26, 2012, at 5:32 PM, Walter Lee Davis wrote:

The way they currently work, they wrap the link with a span set to position:relative, then position the tooltip absolutely respective to that element. So it really doesn’t matter much where they appear in the document, although this overflow wrinkle has convinced me that I need to work harder on changing the basic premise.

In a “move everything to an overlay” approach, the elements would be positioned relative to their original parent, but using Prototype’s Element.cumulativeOffset() method to recreate the origin point within the overarching overlay. This would not respect a screen resize, so it would have to be run in a method that could be called whenever the window:resize event fired, too. None of this is enormously difficult, but it is not simple, either.

Walter

On Jun 26, 2012, at 5:22 PM, Ernie Simpson wrote:

I’ve not ventured into this territory yet, but am curiously following it.

Do these tooltips respect css positioning? ( relative, absolute, etc )?

–
Ernie Simpson

On Tue, Jun 26, 2012 at 4:54 PM, Walter Lee Davis email@hiddenwrote:

Yeah, this is a problem that I haven’t worked out yet. I think I started
working on moving all of the tooltips into a new z-index: 1000 layer over
the entire page, but then I may have put it aside for later. I’ll see if I
can dig up the work again. This is non-trivial stuff, particularly if you
want to ensure that a tooltip respects the edges of the browser window.

Walter

On Jun 26, 2012, at 4:49 PM, OmarKN wrote:

try again …

Me thinks it has to do with the OVERFLOW: HIDDEN setting of the PARENT
layer/ DIV, in m y case (as it should be in an inline structure) the
containing row.

http://mac.abc.se/home/onesr/frw/06/main2.html

Instances 1 and 2 work (OVERflOW : VISIBLE; against the rule)
Instance3 is OK (OVERflOW : HIDDEN) because there is enough space above,
which is not in
Instance4a …

So this is how it is right now,
if Walter doesn’t venture along with his magic staff …

bw/ Omar K N

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

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

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

29

Okay, it’s completely working now. Resize is handled with an event handler per tooltip. Not the most efficient way to do it, but it’s solid and working.

Walter

On Jun 26, 2012, at 5:48 PM, Walter Lee Davis wrote:

I found my document, and realized that I had actually completely fixed it there. Not sure why I didn’t upload it. Here you go:

Tooltips and http://scripty.walterdavisstudio.com/tooltips/tooltips.zip

This works fine with overflow hidden or visible, because everything is moved out into the PageDiv, last in source order, and set to a very high z-index. Ah, wait, no, now that I think about it, this still won’t work if the page is resized. That must be why I didn’t upload it.

Well, food for thought anyway.

Walter

On Jun 26, 2012, at 5:32 PM, Walter Lee Davis wrote:

The way they currently work, they wrap the link with a span set to position:relative, then position the tooltip absolutely respective to that element. So it really doesn’t matter much where they appear in the document, although this overflow wrinkle has convinced me that I need to work harder on changing the basic premise.

In a “move everything to an overlay” approach, the elements would be positioned relative to their original parent, but using Prototype’s Element.cumulativeOffset() method to recreate the origin point within the overarching overlay. This would not respect a screen resize, so it would have to be run in a method that could be called whenever the window:resize event fired, too. None of this is enormously difficult, but it is not simple, either.

Walter

On Jun 26, 2012, at 5:22 PM, Ernie Simpson wrote:

I’ve not ventured into this territory yet, but am curiously following it.

Do these tooltips respect css positioning? ( relative, absolute, etc )?

–
Ernie Simpson

On Tue, Jun 26, 2012 at 4:54 PM, Walter Lee Davis email@hiddenwrote:

Yeah, this is a problem that I haven’t worked out yet. I think I started
working on moving all of the tooltips into a new z-index: 1000 layer over
the entire page, but then I may have put it aside for later. I’ll see if I
can dig up the work again. This is non-trivial stuff, particularly if you
want to ensure that a tooltip respects the edges of the browser window.

Walter

On Jun 26, 2012, at 4:49 PM, OmarKN wrote:

try again …

Me thinks it has to do with the OVERFLOW: HIDDEN setting of the PARENT
layer/ DIV, in m y case (as it should be in an inline structure) the
containing row.

http://mac.abc.se/home/onesr/frw/06/main2.html

Instances 1 and 2 work (OVERflOW : VISIBLE; against the rule)
Instance3 is OK (OVERflOW : HIDDEN) because there is enough space above,
which is not in
Instance4a …

So this is how it is right now,
if Walter doesn’t venture along with his magic staff …

bw/ Omar K N

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

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

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

30

Thanks Walter :slight_smile:

–
Ernie Simpson

On Tue, Jun 26, 2012 at 6:05 PM, Walter Lee Davis email@hiddenwrote:

Okay, it’s completely working now. Resize is handled with an event handler
per tooltip. Not the most efficient way to do it, but it’s solid and
working.

Walter

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

31

Hi,
Thank you Walter,

the tooltips are now well positioned above the words / instances.

However - and I’m sorry having to return to this issue - the tooltips (updated version 2 from today) are still cut off if the THE CONTAINING LAYER of the rows IS SET TO OVERflOW : HIDDEN

http://mac.abc.se/home/onesr/frw/06/main2.html

(CONTAINING LAYERS have green borders)

Alternatively,

what would happen (to my page) if I set my THE CONTAINING LAYERs of the rows to VISIBLE, wouldn’t this be the easy way out (of trouble)?!

/bw
Omar KN

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

32

Please start over from the document I posted. The changes I made were in the Protaculous settings, and I don’t see the result at all in your page. You still have the “in place” tooltips, and I changed these to move out to the very end of the page source instead, where they float above everything else on the page. The only thing I have not fixed is the tooltip being cut off if its trigger element is too close to the screen edge left or right. It catches the top issue neatly, though.

Walter

On Jun 27, 2012, at 4:35 PM, OmarKN wrote:

Hi,
Thank you Walter,

the tooltips are now well positioned above the words / instances.

However - and I’m sorry having to return to this issue - the tooltips (updated version 2 from today) are still cut off if the THE CONTAINING LAYER of the rows IS SET TO OVERflOW : HIDDEN

http://mac.abc.se/home/onesr/frw/06/main2.html

(CONTAINING LAYERS have green borders)

Alternatively,

what would happen (to my page) if I set my THE CONTAINING LAYERs of the rows to VISIBLE, wouldn’t this be the easy way out (of trouble)?!

/bw
Omar KN

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