Hiding the tag box

[LoB]

Hello again,

How do I go about making the tag box invisible unless it's hovered
over?

Thanks,

Eric

[FND]

> How do I go about making the tag box invisible unless it's hovered
> over?

Well, making it only appear when the mouse pointer is over the invisible
box might be tricky (and not very user-friendly).

However, you could make it disappear when the mouse pointer is not
hovering over the respective *tiddler* - try adding the following code
to your StyleSheet (shadow) tiddler:
.tiddler .tagged {
visibility: hidden;
}
.selected .tagged {
visibility: visible;
}
(You could also try "display: none/block;" instead of "visibility:
hidden/visible;" - this usually doesn't make much of a difference though.)

HTH.

-- F.

[Eric Shulman]

> (You could also try "display: none/block;" instead of "visibility:
> hidden/visible;" - this usually doesn't make much of a difference though.)

"visibility" only affects the display of the element, but not the
layout surrounding it... "display", on the other hand, not only hides
the element, it also re-flows the content surrounding it to re-use the
space that element occupies.


-e

[LoB]

> However, you could make it disappear when the mouse pointer is not
> hovering over the respective *tiddler* - try adding the following code
> to your StyleSheet (shadow) tiddler:
> .tiddler .tagged {
> visibility: hidden;
> }
> .selected .tagged {
> visibility: visible;
> }
> (You could also try "display: none/block;" instead of "visibility:
> hidden/visible;" - this usually doesn't make much of a difference though.)
>
> HTH.
>
> -- F.

So I should add the following to my stylesheet?:

.tiddler .tagged {
display: none;
}
.selected .tagged {
display: block;
}

[FND]

> So I should add the following to my stylesheet?: [snip]

Yup, that should do it.

I initially used the visibility property because that would make it
possible (though not easy, because IE6 doesn't support the ":hover"
pseudo-class) to only show the tags box when the mouse pointer is over
that particular box. (As Eric has explained, "display: none;" removes
the element from the document flow - so the mouse pointer can never be
over that box.)
Anyway, I don't think you have to worry about that.


-- F.

[LoB]

Worked like a charm! Thanks!