OpenLayers tooltips

Question

Please point me to examples of combining OpenLayers and any external tooltip libraries like this. I try to use native OL tools for building tooltips here, but they not flexible and customizable. Thanks.

Answer 1

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

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();

Answer 2

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