Hovercard with D3

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
<link rel="stylesheet" href="//t4t5.github.io/sweetalert/dist/sweetalert.css">
<script src="//linkedin.github.io/hopscotch/js/hopscotch-0.1.2.min.js"></script>
<link rel="stylesheet" href="//linkedin.github.io/hopscotch/css/hopscotch.css">
<div class="container" id='welcome_tour'>
    <h2 id='header'>Title</h2>
    <div class="well" id='profile-pic'>
Jatt boy, 5'11'', born and raised in India, Moved to US to finish bachelors at Purdue, now a web developer and an entrepreneur.
<span class="preview">
   <label class="name">Prashant Chaudhary</label>
</span>
is currently located in Indianapolis + Chicago. He also runs a design blog Design with PC. You can follow him @chaudharyp on twitter.
</div>
</div>

CSS

.container{
    margin-top: 30px;
}
body
{
    font-family:sans-serif;
    font-size:13px;
    color:#777;
    line-height:1.5em;   
}
span.preview
{
    position:relative;            
}
.name
{
    color:#000;
    font-weight:bold;    
    position:relative;    
    z-index:100;
}
.details
{
    color:#777;        
    line-height:1.5em;    
    background:#fff;    
    border:solid 1px #ddd;      
    position:absolute;
    width:300px;
    border-radius:3px;        
    left:-10px;
    top:-10px;
    z-index:50;
    padding:2em 10px 10px;
    box-shadow:5px 5px 5px #888;
    opacity: 0;
}
.details img,
.details2 img,
{
    width:70px;    
    float:right;
    margin-top:-1em;
}
label.name{
  cursor: pointer;
}
.sweet-alert p{
  font-family: 'Helvetica';
  font-size: 13px;
  color: #777;
  line-height: 1.5em;
}
label.name{
  margin-bottom: 0px;
}
.well{
  text-align: justify;
}

CoffeeScript

tour =     {
      id: "welcome_tour",
      steps: [
        {
          target: "header",
          placement: "bottom",
          title: "This is the navigation menu",
          content: "Use the links here to get around on our site!"
        },
        {
          target: "profile-pic",
          placement: "bottom",
          title: "Your profile picture",
          content: "Upload a profile picture here."
        },
      ]
}

hopscotch.startTour(tour)
y = '''
<img src="http://30.media.tumblr.com/avatar_d3eadb3e29f8_128.png" alt="PC"/>Web developer. Loves UI/UX.<br/>Indianapolis IN<br/>
 <a href="#">http://callmepc.com</a>
'''

y2 = '''
<p>It is com­mon to use a Ljung-Box test to check that the resid­u­als from a time series model resem­ble white noise.
</p>
'''

###
d3.select(".name").on 'mouseover', ->
  d3u.hovercard(this, y, true)
d3.select(".name").on 'mouseout', ->
  d3u.hovercard(this, y, false)
###

    
d3u = d3u || {}
d3u.hovercard = ->
  exports = (selection) ->
    selection.each (data) ->
      x = d3.select(this).node().parentNode
      det = d3.select(x)
        .selectAll('.details').data([data])
      console.log d3.select(this).on("mouseover")
      d3.select(this).on "mouseover", ->
        det.enter().append("span")
          .attr("class", "details")
        det.html((d) -> d)
        det.transition().duration(500)
          .style('opacity', 1)
      d3.select(this).on "mouseout", ->
         det.transition().duration(500)
           .style('opacity', 0)
           .remove()
            

d3.select(".name")
  .datum(y2)
  .call(d3u.hovercard())
    
hcPreview = d3.select(".preview")
    
###
    
function adjustToViewPort(hcPreview) {

                var hcDetails = hcPreview.find('.hc-details').eq(0);
                var hcPreviewRect = hcPreview[0].getBoundingClientRect();

                var hcdTop = hcPreviewRect.top - 20; //Subtracting 20px of padding;
                var hcdRight = hcPreviewRect.left + 35 + hcDetails.width();...