Strike through explanations

index.html

<div>
  <h1>Strike out explanations</h1>
  <p>Semantic, lovely, <del class="removed" title="Actually, on second thoughts, they aren't that hard to use">hard to use,</del> explanations of strikethrough text.  I was on a popular website earlier and they had an article full of amended text, but none of it had any description as to why the text was missing.</p>
  <p>Editing is the process of selecting and preparing written, visual, audible, and film media used to convey information. The editing process can involve correction, <del class="removed" title="I removed this bit, as it wasn't entirely correct">sausages, baked beans, fried eggs,</del> condensation, organization, and other modifications performed with an intention of producing a correct, consistent, accurate, and complete work.</p>
  <p>Colors from <a href='http://flatuicolors.com/'>flatuicolors.com</a></p>
</div>

script.js

$(document).ready(function(){
  $(".removed").each(function(){
    var description = $(this).attr("title");
    var element = $("<aside>"+description+"</aside>");
    var top = $(this).position().top;
    $(this).append(element);
    $(element).css('top',top);
    $(this).hover(function(){
      $(this).data('title', this.title).prop('title', null);
      $(this).find("aside").fadeIn('fast');
    },function(){
      $(this).prop('title', $(this).data('title'));
      $(this).find("aside").fadeOut('fast');
    })
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

strike-through-explanations.markdown

Strike through explanations

I was on a website earlier and a large part of the article I was reading was 'strike-out' text. I really approve of strike out stuff, as it shows what is meant to be seen but either not correct or of interest, but I was frustrated that I couldn't tell why the article had strike outs in it. It was the idea I needed to make this little pen!

A Pen by eightarmshq on CodePen.

License.

style.scss

@import "compass/css3";

$pri  : #2ecc71;
$sec  : #34495e;

body{
  background:$pri;
  color:#fff;
  font-family: 'Montserrat', sans-serif;
}

div{
  max-width:400px;
  margin:0 auto;
  position:relative;
}

h1{
}

a{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  &:hover{
    color:$sec;
  }
}

.removed{
  text-decoration:line-through;
  color:$sec;
  cursor:help;
  &:hover{
    color:#fff;
  }
}

.removed aside{
  text-decoration:none;
  position:absolute;
  padding:0 10px;
  left:-215px;
  width:200px;
  display:none;  
  color:$sec;
}

.removed aside:after{

  content:'';
  height:0px;
  width:0;
  top:3px; 
  position:absolute;
  right:5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent $sec;
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />

May I know the license of your CSS and JS codes?