[GIS] Custom Control Tooltips

openlayers

Following the OpenLayers tutorial I've got a working custom control with working tooltips for the default Controls as shown in this tutorial. Is it possible to add a tooltip to one or more custom controls in a simple way or to inherit that behaviour? Regarding the API, the custom control doesn't seem to inherit any tooltip behavior at all, yet the subclasses all have default Tooltip texts. If I, however, put in the same parameter for the tooltip as used in a default control, nothing happens.

// namespace
window.app = {}; 
var app = window.app;

app.customControl = function (opt_options) {
    var options = opt_options || {};

    var button = document.createElement("button");
    button.innerHTML = "<img src='img/custom_control_icon.svg'></img>";

    var custCtrlFct = function (e) {
        // Function logic
    };

    button.addEventListener('click', cstCtrlFct, false);

    var element = document.createElement('div');
    element.className = "custom-button ol-unselectable ol-control";
    element.appendChild(button);

    ol.control.Control.call(this, {
        element: element,
        target: options.target
    })
};
ol.inherits(app.customControl, ol.control.Control);

The custom control gets added to the map at creation.

var map = new ol.Map({
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }).extend([new app.customControl({tipLabel: "Tooltip"})]),
//[...]
});

Do I have to re-implement the whole Tooltip behavior by myself or is there a way to get OpenLayers to use the Tooltip behaviour of the built-in controls?

Best Answer

After some digging in the ol-source and a weekend of not pondering on this one, I found the following solution/workaround:

    // namespace
window.app = {}; 
var app = window.app;

app.customControl = function (opt_options) {
    var options = opt_options || {};

    var button = document.createElement("button");

    // This will be the Tooltip text or an empty string if not set
    var buttonTipLabel = options.buttonTipLabel ? options.buttonTipLabel : "";

     button.innerHTML = "<img src='img/custom_control_icon.svg'></img>";

    var custCtrlFct = function (e) {
        // Function logic
    };

    button.addEventListener('click', cstCtrlFct, false);

    var element = document.createElement('div');
    element.className = "custom-button ol-unselectable ol-control";
    //Set title of the button to display the tooltip
    button.title = buttonTipLabel;
    button.className = "custom-control";
    element.appendChild(button);

    ol.control.Control.call(this, {
        element: element,
        target: options.target
    })
};
ol.inherits(app.customControl, ol.control.Control);

Set the tooltip-text at map creation:

var map = new ol.Map({
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }).extend([new app.customControl({buttonTipLabel: "Tooltip Text"})]),
 //[...]
});

after creating the map, add the following code:

$(".custom-control").tooltip({
    placement: "right" // customize as needed
});

this will get you a tooltip with the same look as the default tooltip.

Related Question