JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js"></script>
  <h2 class="tile-header">CCIR</h2>
        <span> 
            <img
            role="button"
            id="cis-info-button"
            aria-labeledby="Information for ccir Summary"
                ng-click="vm.showHelp()"
                ng-keydown="vm.keyHelp ($event)"
            class="info-icon"
            ng-src="{{infosrc_ccir}}"
            alt="ccir Summary Information"
            width="10" height="10">
        </span>

JavaScript

function showHelp()
    {
        var helpConfig =
            {
                animation: true,
                templateUrl: 'scripts/tiles/ccirSummary/views/ccirSummaryInfo.html',
                size: 'ccir-summary-help'
            };
        $modal.open(helpConfig);
    }

    function keyHelp(e)
    {
        if (e.keyCode === 13 || e.charCode === 32)
        {
            showHelp();
        }
    }