title: How to show different popups on click and on mouseover?
body: <p>The <code>SelectFeature</code> method in <code>Control</code> class provides a way of adding and removing popups on the Vector layer by listening to events <code>featureselected</code> and <code>featureunselected</code> respectively. Below shows a sample code that I obtained from <a href="http://openlayers.org/dev/examples/light-basic.html" rel="nofollow">an example</a> in the openlayers website:</p>
  
  <pre class="lang-js prettyprint-override"><code>// create the layer with listeners to create and destroy popups
  var vector = new OpenLayers.Layer.Vector("Points",{
   eventListeners:{
    'featureselected':function(evt){
     var feature = evt.feature;
     var popup = new OpenLayers.Popup.FramedCloud("popup",
      OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
      null,
      "&lt;div style='font-size:.8em'&gt;Feature: " + feature.id +"&lt;br&gt;Foo: &lt;/div&gt;",
      null,
      true
     );
     feature.popup = popup;
     map.addPopup(popup);
    },
    'featureunselected':function(evt){
     var feature = evt.feature;
     map.removePopup(feature.popup);
     feature.popup.destroy();
     feature.popup = null;
    }
   }
  });
  
  vector.addFeatures(features);
  
  // create the select feature control
  var selector = new OpenLayers.Control.SelectFeature(vector,{
   hover:true, # this line
   autoActivate:true
  });
  </code></pre>
  
  <p>The code above will allow a popup to be shown upon mouseover on the Geometry object (icon or marker on the map). If the line <code>hover:true</code> is removed, the popup will be shown only upon a mouse click on the Geometry object.</p>
  
  <p>What I want, is to be able to display one type of popup (example, an image plus a title) upon mouseover and another type (example, detailed description) upon a mouse click. I am not sure how this could be done. Some help would be much appreciated. Thanks.</p>