JSFiddle - React, Tailwind, and code Playground

by aybalasubramanian

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div style="height: 200px; width: 500px; background-color: #eee">Paaaaaading....</div>
<p>This is a <a href="#" title="A collection of words.">sentence</a> with a tooltip</p>

<span class="fontBold pull-left">Project Partner</span> 
<a href="#" id="lblProjPartner" class="pull-left" rel="tooltip" title="ABC" data-bind="text: ProjManager, tooltip: { title:ProjManager }">PQR
</a>

JavaScript

$(document).ready(function(){
    $("a").tooltip();
});

var manageClientFoldersView = (function () {
    return {
        Initialize: function () {
            window.manageClientFoldersViewModel = new manageClientFoldersView.ViewModel();
            ko.applyBindings(window.manageClientFoldersViewModel);
            window.manageClientFoldersViewModel.DocReady();
        },
        ViewModel: function () {
            var self = this;
            self.ProjManager = ko.observable();
            self.DocReady = function () {
                self.ProjManager('XYZ');
                $('#lblProjManager').tooltip({
                    placement: 'bottom'
                });
                $('#lblProjManager').attr('data-original-title', self.ProjManager());
            };
        }
    }
})();
manageClientFoldersView.Initialize();