JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<div id ="article-detail-desc" >
   <p>
	A storm of moral outrage over tax avoiders is brewing in European capitals making fiscal and welfare cuts to ward off recession. To be clear, there is a difference between tax avoidance also known as tax mitigation - a legal manipulation of the system via loopholes - and tax evasion whereby tax payers fraudulently misrepresent their income. The little guy pays a larger percentage of tax than the mega-rich and is subject to being hassled by tax authorities whereas multi-national corporations are able to afford the services of top notch tax accountants and set-up complex shell companies. I&rsquo;m one example. When I was self-employed in my early 20s, I received a visit from a grim-faced Inland Revenue Inspector who declined my offer of a cup of tea. &ldquo;I&rsquo;ve come to collect an outstanding amount of income tax,&rdquo; he told me. &ldquo;How much?&rdquo; I asked with trepidation, thinking of my diminutive bank account. &ldquo;&pound;6.20&rdquo; (AED 36.70), he told me with a straight face, which was less than the cost of his time and transport.</p>
<p>
	Currently under fire in Britain are Starbucks, Google and Amazon, accused by the chairwoman of the House of Commons Parliamentary committee as &ldquo;ripping off taxpayers&rdquo; by &ldquo;using structures and exploiting current tax legislation to move offshore profits that are clearly generated from economic activity in the UK.&rdquo; For instance, Amazon&rsquo;s 2011 turnover was reported as &pound;207 million (AED 1.2 billion) but it was only required to pay &pound;1.8 million (AED 10.65 million) in tax. Starbucks&rsquo; sales were in the region of &pound;3.1 billion (AED 18.3 billion) over the last 13 years out of which just &pound;8.6 million (AED 50.9 million) ended-up in the Treasury&rsquo;s coffers.</p>
<p>
	Google posted &pound;2.5 billion (AED 14.8 billion) UK sales last year and paid just &pound;3.4 million (AED 20.1 million). The committee has also blasted...

CSS

p {margin:10px;}
#ArticleContent { width:500px; height:100%; text-align:justify; background-color:#fff;}

.ad-keyword-selected
    {
        color:#990044;
        text-decoration:none;
    }
    
 .ui-tooltip, .arrow:after {
background: #fff;
border: 1px solid #f5f5f5;
}
.ui-tooltip {
padding: 10px 20px;
color: #333333;
border-radius: 10px;
font: normal 12px Georgia,"Times New Roman",Times,serif;
text-transform: uppercase;
box-shadow: 0 0 3px #333333;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}

JavaScript

function HighlightKeywords(keywords)
{        
    var el = $("#article-detail-desc");
    var language = "en-US";
    var pid = 100;
    var issueID = 10; 

    $(keywords).each(function()
    {
        var pattern = new RegExp("("+this+")", ["gi"]);
         var rs = "<a class='ad-keyword-selected' href='en/search.aspx?Language="+language+"&PageId="+pid+"&issue="+issueID+"&search=$1' title='Seach website for:  $1'><span style='color:#990044; tex-decoration:none;'>$1</span></a>";
        el.html(el.html().replace(pattern, rs));
    });
}   

HighlightKeywords(["David Cameron","mega-rich","corporations","House of Commons","Amazon","Google","Starbucks","UK","US","tax havens","Singapore","Hong Kong","Dubai","New Jersey"]);


//function for popup tool tip
    $(function() {
        $("#article-detail-desc").tooltip({
        position: {
            my: "center bottom-20",
            at: "center top",
            using: function( position, feedback ) {
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
        }
        });
    });