Skip to content

Instantly share code, notes, and snippets.

@tomgruner
Created August 3, 2012 09:53
Show Gist options
  • Save tomgruner/3246366 to your computer and use it in GitHub Desktop.
Save tomgruner/3246366 to your computer and use it in GitHub Desktop.
Tooltip Ellipsis inside backbone view render method
<script id="componentTypeRowTpl" type="text/html">
<td>{{ name }}</td>
<td class="ellipsis_100">{{ description }}</td>
</script>
//Create a reference to this scope as the view
//variable so that we can reference this scope
//from inside the closure below
var view = this;
//For each match, we get an index and the matched node
this.$('.ellipsis_100').each(function(index, node) {
//Convert the dom node into a jQuery object of the node
//so that we can use jQuery methods on it
var $node = view.$(node);
//Check the length using the jQuery html() function
if($node.html().length > 100){
//Add a tooltip using twitter bootstrap components
$node.tooltip({
title : $node.html(),
delay : 300,
placement: 'top'
});
//Now that the tooltip is set, we cut the html of the node
//and add an ellipsis at the end
$node.html($node.html().substring(0,100) + '&hellip;');
}
});
@xwf286
Copy link

xwf286 commented Sep 4, 2013

ffffffff

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment