Twitter Bootstrap Backbone.View

twipsy-view.js

var TwipsyView = Backbone.View.extend({
	tagName: "div",
	className: "twipsy fade",
	events: {
		"mouseenter": "show",
		"mouseleave": "hide"
	},
	options: {
		enabled: true,
		title: "twipsyView",
		placement: "above"
	},
	initialize: function( options ){
		_.bindAll( this, "show", "hide" );
		this.options = _.extend( this.options, options );
		this.$el = $( this.el );
		this.el = "nodeType" in this.el ? this.el : this.$el[ 0 ];
	},
	show: function(){
		var pos,
				actualWidth,
				actualHeight,
				placement,
				$tip,
				tp;

		if (this.options.title && this.options.enabled ){
			$tip = $( this.render() );

			$tip
				.css({ top: 0, left: 0, display: "block" })
				.prependTo( document.body )

			pos = _.extend( {}, this.$el.offset(), {
				width: this.el.offsetWidth,
				height: this.el.offsetHeight
			});

			actualWidth = $tip[0].offsetWidth
			actualHeight = $tip[0].offsetHeight

			placement = _.isFunction( this.options.placement ) ? this.options.placement.apply(  this, [ $tip[0], this.el ] ) : this.options.placement;

			switch ( placement ){
				case "below":
					tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
					break;
				case "above":
					tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
					break;
				case "left":
					tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
					break;
				case "right":
					tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
					break;
			}
	
			this.$tip = $tip
				.css( tp )
				.addClass( placement )
				.addClass( "in" )
			
    }

	},
	hide: function(){
		this.$tip
					.removeClass( "in" )
					.remove();
	},
	template: _.template( '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"><%= title %></div></div>' ),
	render: function(){
		return this.template({ title: this.options.title });
		//this.make( this.tagName, _.extend( {},{ "class": this.className } ) );
	}
});
return TwipsyView;