[TW5] Problem with tooltip in sidebar

[FrD]

Hi,

I'm using some css in order to display a tooltip when I hover on some links. The tooltip displays the content of the tiddler (these tiddlers are meant to be short -:) ).

When using this tool from the storyriver, it's ok (see first screenshot).
But when I put this tiddler in the sidebar; the tooltip is masked by the tiddler in the story river (second screenshot), although z-index is 1000.

Content of the css tiddler :

.tooltip {
	color: black;
	text-decoration: none;
	position:relative;
}
 
.tooltip:hover {
	color: red;
	position: relative;
}
 
.tooltip span
{
	display:none;
	color:black;
	background:white;	
//	-moz-border-radius:6px;
//	-webkit-border-radius:6px;
//	border-radius:6px;
}


.tooltip span img
{
	float:left;
	margin:0px 8px 8px 0;
}


.tooltip:hover span
{
	display:block;
	position:absolute;
	width:500px;
	max-height:300px;
	text-justify: inter-word;
	top:100%;
	left:50%;
	z-index:1000;
	padding:8px;
	overflow: auto;
	-webkit-box-shadow: 2px 2px 15px 1px rgba(119, 119, 119, 0.5);
	-moz-box-shadow: 2px 2px 15px 1px rgba(119, 119, 119, 0.5);
	box-shadow: 2px 2px 15px 1px rgba(119, 119, 119, 0.5);
}

My skills are limited on this css stuff and it's mainly copy and paste from what I find (and understand ?) on some sites.

How could I do to get back these tooltips on top ?

Thanks

FrD

[Jeremy Ruston]

Hi FrD

The content of the sidebar is scrollable, and it is not possible for content within a scrollable to escape its boundaries. There’s a discussion here:

https://github.com/Jermolene/TiddlyWiki5/issues/1679

I think it has come up in another discussion but I can’t find it now - Tobias, I think you were involved if you remember?

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/64bd5912-2dab-4449-973e-b293607e3ccc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[FrD]

Hi Jeremy,

Thanks for the explanation.
I guess one way to go for me would be for the tooltip to fit inside the boundaries of the sidebar.

The idea behind that tooltip was to be able to have a quick look at some journal entries and drag the link of the relevant ones in the journal entry I was writing.

FrD

[FrD]

Hi Jeremy,

I've read the thread you mentionned (https://github.com/Jermolene/TiddlyWiki5/issues/1679)

The proposed solution would be great for me : to display the content of the tiddler the mouse is hovering inside a panel at the bottom of the sidebar tab.
But so far I don't have any idea on how to implement this ...

FrD

Le samedi 3 octobre 2015 19:05:52 UTC+2, Jeremy Ruston a écrit :

[Tobias Beer]

Hi Jeremy,

 

I think it has come up in another discussion but I can’t find it now 

Tobias, I think you were involved if you remember?

Yes, it was about something similar with columns...

#1102 reveal widget: allow popups to work with column-count layouts

https://github.com/Jermolene/TiddlyWiki5/issues/1102 

...and my desire to take popups out of the document flow by rendering them somewhere else entirely.

One possibility would be to just leave an anchor widget in the place where the popup is now rendered

that links it to the popup being rendered completely independent of the story or sidebar.

Best wishes,

— tb

[BJ]

HI Tobias,
one complication is that a popup can be inside another popup, which is currently determined by search up the dom nodes from the current popups dom node.

cheers
BJ

[Tobias Beer]

 Hi BJ,

 

one complication is that a popup can be inside another popup, which is currently determined by search up the dom nodes from the current popups dom node.

I think it shouldn't be like that.
Rather, popups should relate to their parent / anchor via reference,

all the way to a non-popup anchor in the document flow.
That way, their positioning is basically independent, but hooked.

Best wishes,

— tb

[FrD]

Hi,

I've begun an implementation of a widget working with mouseover and mouseout events.
It's here :

https://www.dropbox.com/s/eyr8qd4eajudher/TW519-BasicOver.html?dl=0

FrD

[Tobias Beer]

Hi everyone,

You can now use the widget tobibeer/appear as announced here

to remedy the problem of cut-off popup contents.

Best wishes,

Tobias.