Question

This is a very similar question to Backbone not binding events to jQuery Popover – however the answer does not seem to meet my needs.

I wish to bind a (twitter bootstrap) popover to one of my views, but not sure how I am supposed to do it?

events : {      
    "hover .info" : "showDetails",      
},
render : function(){        
    var content = this.template.tmpl(this.model.toJSON());
    $(this.el).html(content);       
    return this;
},
showDetails : function() {

    this.$(".info").popover({title: 'Hello', content: 'World'});    
    this.$(".info").popover('show');        
    console.log(this.model.get('description'));
},

My template looks like

<script type="text/template" id="item-template">
  <div class="well listitem" style="padding: 14px 19px;">
    <div class="row show-grid" title="Irregular three column layout">
      <div class="span6">${heading}</div>
      <div class="span1">${price}</div>
      <div class="span1"><button class="btn info">Details</button></div>        
    </div>
  </div>
</script>

So I am trying to show some text in the popover when the mouse enters the button and vanish when mouse leaves – however on mouse over

1. The popover appears with undefined as the heading
2. On mouse out it stays in position.

I think I am not binding properly but would be great if someone could see my mistake.

Answer 1

The problem is that the Jquery hover event needs two callback functions, one for mouseenter and one mouseleave. In your case you pass only one function that will call on mouseenter and open your popover. From the jquery docs:

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

So change your code like this will fix your second problem:

events : {      
    "mouseenter .info" : "showDetails", 
    "mouseleave .info" : "hideDetails"     
},
render : function(){        
    var content = this.template.tmpl(this.model.toJSON());
    $(this.el).html(content);       
    return this;
},
showDetails : function() {

    this.$(".info").popover({title: 'Hello', content: 'World'});    
    this.$(".info").popover('show');        
    console.log(this.model.get('description'));
},
hideDetails : function() {
    this.$(".info").popover('hide');   
},