OpenLayers2 と OpenLayers3 以降とではだいぶ構成が違うので慣れるまでが大変です。

イベントハンドラの代替案２つ

Feature にはクリックイベントが無いようです。似たような動作をしたい場合は、マップオブジェクトのクリックイベントで行えます。以下の例では、クリックした座標から forEachFeatureAtPixels を使ってヒットした Feature をすべてコンソールに出力しています。

map.on('click',function(e){
	map.forEachFeatureAtPixel(e.pixel,function(feature,layer){
		console.log(feature);
	})
});

セレクトツール（インタラクションというらしいが）で良ければ、下記のようなコードでも実現できます。こちらの場合、選択時のスタイルも設定しておくか、選択されたら即解除するような処理を入れておかないとおかしな動作に見えると思います。

var selectSingleClick = new ol.interaction.Select();
map.addInteraction(selectSingleClick);
selectSingleClick.on('select',function(e) {
	console.log(e.target.getFeatures().getLength());
});

ポップアップ（吹き出し）の作り方

OpenLayers2 のときあった OpenLayers.Popup.FramedCloud も無いみたいです。CSS で吹き出し形状にするのって、after などの疑似要素やボーダーの変態活用が絡むのであまりやりたくない。標準のポップアップくらい用意しておいてくれよと思います。

枠だけで良いなら下記のように jQuery でスタイルも埋め込んでやれば CSS 要りません。ただし地図においては、三角形がないとどこを示しているポップアップなのか分からなくなるので、素直に CSS に定義したほうが良さそうです。

popup_container =
	$('<div>')
	.css({
		'position':'absolute',
		'background-color':'white',
		'box-shadow':'0 1px 4px rgba(0,0,0,0.2)',
		'padding':'15px',
		'border-radius':'10px',
		'border':'1px solid #cccccc',
		'bottom':'12px',
		'left':'-50px',
		'min-width':'280px'
	})
	.append($('<div>',{class:'pp_content'}));

popup_overlay = new ol.Overlay({
	element: popup_container[0],
	autoPan: true,
	autoPanAnimation: {
		duration: 250
	}
});

マップのクリックイベントハンドラを下記のように書けばポップアップを表示できます。

map.on('click',function(e){
	map.forEachFeatureAtPixel(e.pixel,function(feature,layer){
		var geom = feature.getGeometry();
		var coord = geom.getCoordinates();
		popup_overlay.setPosition(coord);
		var obj = $(popup_overlay.element);
		obj.find('.pp_content').text(feature.getProperties()...);
	})
});

ポップアップを閉じるには下記のようにします。

popup_overlay.setPosition(undefined);