OxWords

Add a description about a fancy word --- Example <abbr title="To take another's possessions or rights gradually or stealthily">encroachments</abbr>

by Imri Paloja

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<article>
    <b>code</b>:<br>
    <textarea readonly>&lt;abbr title="To take another's possessions or rights gradually or stealthily">encroachments&lt;/abbr></textarea><br><br>
    <b> Before javascript code</b>:<br>
    encroachments
    <hr>
        <b>after javascript code</b>:<br>
        

        <p>
        <abbr title="To take another's possessions or rights gradually or stealthily">encroachments</abbr>
        </p>

        <hr>

    <p>
        cheese something, something, lethargic. cheese something, something, acronyms. cheese something, something, oxymoron. 
    </p>        
</article>
        <hr>
        <ul>
            <li><a href="http://stackoverflow.com/questions/2707100/how-to-show-hidden-divs-on-mouseover" title="How to show hidden divs on mouseover?">How to show hidden divs on mouseover?</a></li>
            </ul>

CSS

abbr {
    border-bottom: 1px dotted #454545;
}

textarea {
    border: 1px solid #000000;
    color: #454545;
    width: 85%;
    border: 1px solid;
    padding: 2px 3px;
    resize: none;
    overflow: hidden;
    font-size: 12px;
}

hr {
    border: 1px solid #CCCCCC;
}

JavaScript

jQuery(document).ready(function($){
    var select = $('article,p[$fancyword]');
    select.attr('title', '$description');
    select.fancybox();
  });