can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
41 lines (35 loc) • 1.24 kB
HTML
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<style>
[tooltip] {
background-color: rgb(153, 194, 255);
border: 1px solid #e1e1e8;
}
[tooltip]:hover {
}
</style>
<script src="../../node_modules/steal/steal.js" main="@empty"></script>
<div id="demo">
<div id="app"></div>
<script type="text/mustache" id="app-template">
<pre>
can.view.attr(<span tooltip="The attribute name to match.">"tooltip"</span>, function( <span tooltip="HTMLElement">el</span>, <span tooltip="attrData">attrData</span> ) {
$(el).<span tooltip="Calls jQueryUI's tooltip plugin.">"tooltip"</span>({
content: <span tooltip="Sets the tooltip's content">el.getAttribute("tooltip")</span>,
items: <span tooltip="jQueryUI's tooltip needs to be told what type of elements have a tooltip">"[tooltip]"</span>
})
});
</pre>
</script>
</div>
<script>DEMO_HTML = document.getElementById("demo").innerHTML</script>
<script>
steal("can/view/mustache", "jquery-ui",function(){
can.view.attr("tooltip", function( el, attrData ) {
$(el).tooltip({
content: el.getAttribute("tooltip"),
items: "[tooltip]"
})
})
$("#app").html( can.view("app-template",{}) )
})
</script>