Course Info Popup

[david-yz-liu]

A Google Maps-style popup displaying course information when hovering over a course.

[david-yz-liu]

Now we want to make it a modal, like Instagram or Facebook pictures.

[Ian-Stewart-Binks]

With SVG, the tooltip is defined by the <title/> tag, whereas in HTML the tooltip is defined by the title attribute. The tooltip function from jQuery has so far been unsuccessful. For the PCRS, I created functions that would dynamically create divs based on where you clicked. I can do something similar here.

The div would also have some sort of time decay until it disappeared. I hate tool tips that are destroyed on mouseout.

[david-yz-liu]

Indeed, dynamically generating divs, or perhaps svg elements, is the best approach. It should be easier for us than PCRS because where the element appears should depend only on the node that was clicked.

[Ian-Stewart-Binks]

For future reference, jQuery's tooltip function uses the title attribute. https://github.com/jquery/jquery-ui/blob/master/ui/tooltip.js

[Ian-Stewart-Binks]

The rect's positions are translated some way. Is this due to the viewbox? Do you know how I can get their absolute position? I've tried many many things, but nothing has worked yet. My current approach is to get the X and Y values from the pos upon node hover.

[david-yz-liu]

It's almost certainly due to the viewbox. This isn't an issue if the popup we create is an SVG element, though, right?

[Ian-Stewart-Binks]

This isn't an issue if we use an SVG element, and I have already tested this. However, jQuery becomes an issue. jQuery offers us many features that we would like to use. I'll look into SVG adapted jQuery libraries. d3 (data driven documents) may also be an option. May.

[david-yz-liu]

I'm not entirely sure what the problem with jquery is, but perhaps it would be better to talk about that in person.

If you're getting annoyed with that, you could also work on the modal itself (I'm not sure if you have or not).

On August 8, 2014 12:13:50 AM EDT, Ian Stewart-Binks notifications@github.com wrote:

This isn't an issue if we use an SVG element, and I have already tested this. However, jQuery becomes an issue. jQuery offers us many features that we would like to use. I'll look into SVG adapted jQuery libraries. d3 (data driven documents) may also be an option. May.

---

Reply to this email directly or view it on GitHub: https://github.com/Ian-Stewart-Binks/cscourseplanner/issues/10#issuecomment-51561639

Sent from my Android phone with K-9 Mail. Please excuse my brevity.

[Ian-Stewart-Binks]

No, it's alright. jQuery doesn't always play well with SVG, but d3 is very nice to work with. The custom tool tip is a bit annoying, but with a little work it can be really strong and nicely done. I'll be playing more with the modal.

[Ian-Stewart-Binks]

The features that we want within the modal are:

• Course description
• Video
• Relevant Timetable information
• CSSU wiki page link (we haven't discussed this before. Thoughts?)

Is there anything else that you can think of?

[david-yz-liu]

That sounds fine. Link to past/current course webpages would be nice. Pretty sure we can just use CDF links (see http://www.cdf.toronto.edu/cs_courses/current_course_web_pages.html).

[Ian-Stewart-Binks]

Mmm. Agreed. I'll think of a good way to display relevant links. Perhaps a 'Relevant Links' section.

[Ian-Stewart-Binks]

@david-yz-liu I'm using Course in Graph now. Take a look and let me know what you think.

[Ian-Stewart-Binks]

Alright, I'm pretty much done. Feel free to take a stab at the style whenever you get the chance.