OpenLayers tooltips

OpenGeo has a workshop on Introduction to Openlayes in which a section about Integration with Other Frameworks was introduced here


This might not be the best way to do it, but it's one way. You can improve on it.

enter image description here

DEMO LINK

The key here is to move the wrapper/trigger around onFeatureHighlighted event.

var handler_featurehighlighted = function (e) {

    var tt_trigger = tooltipApi.getTrigger();
    tt_trigger.css({ 'left': mouseEvent.clientX + 'px', 'top': mouseEvent.clientY + 'px' });

    $(".tooltip").html("<strong>Feature Name: " + e.feature.attributes.name + "</strong>");

    tooltipApi.show();

};
var handler_featureunhighlighted = function (e) {
    tooltipApi.hide();
};
var highlightControl = new OpenLayers.Control.SelectFeature(myToolTipLayer, {
    hover: true,
    highlightOnly: true,
    renderIntent: "temporary",
    eventListeners: {
        featurehighlighted: handler_featurehighlighted,
        featureunhighlighted: handler_featureunhighlighted
    }
});

map.addControl(highlightControl);

highlightControl.activate();