CSS/JS Tooltip

1,495 Posts

wendy Reply #1, 18 years, 4 months ago

Guys, I’m looking for a way to make css/js tooltip for calendar. Do you know when you can see the whole year view, I want the user to be able to mouse over the date, and it will popup the events on that date, and allow the user to administer the events from that layer, which means that when the tooltip appear, the user able to go on top of it with their mouse and click on a link.

I tried CSS tooltip from eric mayer solution, but it gives me a weird look, when I insert a tag inside the span. This is the best fitted solution for what I need, but I need the ability to solve this a tag problem side the span.

Here is the current production of the calendar that I’m talking about, I will release it as a module, as soon as it’s ready and have a pretty interface.

http://modx.novsun.net/test/dbcalendar.html?display=year

I’m hoping a reply from our JS king in here, Adam, any thought of this?

Any help will be really appreciated.

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

1,495 Posts

wendy Reply #2, 18 years, 4 months ago

Now it work with firefox, but it doesn’t work with internet explorer, here is the code that I use.

<div id="calYearDayLink"><a class="calYearDayLink" href="[+DayLink+]">[+Day+]
<span><div style="width:200px;">This is text. [+Content+]</div></span></a></div>

Here is the stylesheet

div#calYearDayLink {
	width: 30px;
}
a.calYearDayLink {
	position:relative; /*this is the key*/
	z-index: 24;
	color: #0099FF;
	text-decoration: none;
	font-size: 12px;
	padding: 3px;
}

a.calYearDayLink:hover {
	z-index: 25;
	color: #003399;
	text-decoration: none;
}

a.calYearDayLink span {
	display: none;
}

a.calYearDayLink:hover span { /*the span will display just on :hover state*/
	display:block;
	position:absolute;
	top:2em; left:2em; width:15em;
	border:1px solid #0cf;
	background-color:#cff; color:#000;
	text-align: left;
}

a.calYearDayLink:hover span a {
	color: #0099FF;
	text-decoration: none;
}

a.calYearDayLink span a {
	color: #0099FF;
	text-decoration: none;
}

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

1,495 Posts

wendy Reply #3, 18 years, 4 months ago

It won’t work in IE, and it works in opera, but it has several rendering problem that causes the tooltip to be displayed overlapping each other, because of the after image that is not getting disappeared after the link loose focus.

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

141 Posts

zenmaster Reply #4, 18 years, 4 months ago

Sorry Wendy,

I have had a play with it and I can’t get it to work either.

If you remove the width and position info, it appears and disappears as you would expect but, as soon as you put that info back, it won’t work again.

best of luck.

PS. I notice you are using <div id="calYearDayLink">. You should only have one id with that name per page - you have many. What you have is really a class.

1,495 Posts

wendy Reply #5, 18 years, 4 months ago

Thanks zenmaster.

I’m still trying to figure this out, but I can’t seem to find the solution with pure css. Is there anybody out there who are able to help me out? Javascript solution will work for me too.

Jason? Adam? Mark? Anybody?

Thank you guys...

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

3,975 Posts

Zaigham (aka zi) Reply #6, 18 years, 4 months ago

Holiday Season wink

Did you look at http://script.aculo.us/ ?

I hope you’ll find something for you there.

Zaigham R - MODX Professional | Skype | Email | Twitter

Digging the interwebs for #MODX gems and bringing it to you. modx.link