Add short bio info on Avatars hover

[fotos]

The short bio info is here:
https://docs.google.com/a/euruko2013.org/document/d/1geO6NeqieeFvKo5i5e6XPv6p6YHQlgG6Qhxr4wpnNfs/edit#heading=h.fmmwzgx2k7vj

If anyone is interested to pick this up we can paste them here.

[tsironis]

@fotos I had a great experience setting up and using Tipped jQuery plugin, the only downside is that the have a licensing thing that seems a bit excessive to me. Btw I could afford to pay the $3 fee, if we're interested.

http://projects.nickstakenburg.com/tipped/downloadandlicensing

Also, I found Opentip but it needs some styling to be in harmony with euruko design.

http://www.opentip.org/

[fotos]

@tsironis sorry for the late reply.

Yes there is also OpenTip, but if you are comfortable with Tipped then go ahead, integrate it (with the demo), make the PR and I'll pay the license (from the EuRuKo account). Then we 'll add the licensed files and we 'll merge it. Easy as pie.

I'll admit that I don't like this whole registration stuff for a simple plugin (have you seen the form? 😱) but if it gets the job done them I'm more than happy to do it. 👍

[tsironis]

Few days ago, I discovered this plugin which I find lovely to use http://stevenbenner.github.io/jquery-powertip/ it doesn't have the customization options of Tipped.

I think the PowerTip is a perfect match. I'm going to send you a pr later today.

[fotos]

Awesome, will do as well. Note that tablets / mobiles don't trigger the hover event properly and you should register a click handler for these viewports. I suggest you fix the position (just like the "Mouse on to popup example") to the bottom of each person. Thanks!

[tsironis]

@fotos I have some trouble with Middleman. When I change the <%= javascript_include_tag 'main', 'parallax', 'vendor/easing' %> to <%= javascript_include_tag 'main', 'parallax', 'vendor/easing', 'vendor/powertip' %> the changes don't appear on the localhost.

Also, the same applies to <%= image_tag "committee/gfotos.png", class: "avatar", alt: "@gfotos avatar", title: "@gfotos" %>

[fotos]

@tsironis sorry for the kinda stupid questions but I don't know what's wrong from your description.

1. Does it print anything on the middleman server console?
2. Have you disabled caching in your browser?
3. Can you push your branch somewhere and give a link so I can try too?

[tsironis]

Well, this is the output of my command line:

$ middleman server == The Middleman is loading == The Middleman is standing watch at http://0.0.0.0:4567

Caching is definitely not disabled in my browser, and I tried to refresh or do a complete reload, nothing changed.

Also, you can inspect my changes in the following link. Hope this helps.

tsironis@c8b7603

[fotos]

I checked out your branch (master) and it's loading the JS just fine.

If you view the source you can see that:

<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/main.js" type="text/javascript"></script>
<script src="/javascripts/parallax.js" type="text/javascript"></script>
<script src="/javascripts/vendor/easing.js" type="text/javascript"></script>
<script src="/javascripts/vendor/powertip.js" type="text/javascript"></script>

BTW you should fetch from upstream and reset / rebase your master for the latest changes, because we now use bootstrap-sass as integrated by @graffic. If you do this you can simply load your CSS file by including it into main.css.scss.erb.

[tsironis]

Yeah, I did a restart and now it works. Very, very weird.

[tsironis]

I'm gonna submit the pull request later today. Stay tuned and get psyched 😆

[jimzarkadas]

Guys bootstrap has a tooltip and popover functionality by default. You can pass html if you like and toggle it via data-attributes.
Check these out:

• http://twitter.github.io/bootstrap/javascript.html#tooltips
• http://twitter.github.io/bootstrap/javascript.html#popovers