JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
<script src="http://angular-ui.github.com/lib/bootstrap/docs/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.com/lib/bootstrap/docs/assets/css/bootstrap.css" >
<div ng-app="myApp">
<a title="Easiest. Binding. Ever!" ui-jq="tooltip">Hover over me for static Tooltip</a>
<a data-original-title="{{tooltip}}" ui-jq="tooltip">Fill the input for a dynamic Tooltip:</a>
<input type="text" ng-model="tooltip" placeholder="Tooltip Content" />
</div>
CSS
div {
margin: 20px;
width: 100px;
}
JavaScript
angular.module('myApp', ['ui']).value('ui.config', {
// The ui-jq directive namespace
jq: {
// The Tooltip namespace
tooltip: {
// Tooltip options. This object will be used as the defaults
placement: 'right'
}
}
});