Mapbox: Show tooltips by default, without having to click a marker

Question

What is the best way to have all tooltips on a Mapbox map be open on page load, without having to click on a marker to show it? I tried removing the opacity: 0 on .leaflet-popup but that didn't work because it appears that they are built in the DOM on the fly by JS.

Can this even be done? I realize it's not conventional, but I have a mock I'm trying to recreate that essentially has the markers looking like tooltips, with the title inside. I've searched and searched for ways to customize markers, but the only thing I can find is to use your own custom image. Since I have to have dynamic titles showing that won't work, so my plan now is to use 1x1 transparent pngs for the marker images and just show the tooltips by default.

Edit

Here's my code:

// Setup map
var map = L.mapbox.map("destinations-map", "xxx")
    .setView([40, -74.50], 2);

// Load regions from JSON file
var loadRegions = function () {
    $.ajax({
        dataType: "json",
        url: "/regions",
        success: function (data) {

            $.each(data.regions, function(i, region) {
                L.mapbox.markerLayer({
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: region.coordinates
                    },
                    properties: {
                        title: region.title
                    }
                })
                .addTo(map)
                .openPopup();
            });

        }
    });
};

// Initially load region markers
loadRegions();

Answer 1

You could modify the default behavior of popups by extending the Map object in Leaflet. Leaflet.js makes extensive use of a pseudo-classical inheritance pattern, so you have a lot of work already cut out for you. Try:

L.Map = L.Map.extend({
    openPopup: function(popup) {
        this._popup = popup;

        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
});

And then when you add your popups, open them directly like so:

L.marker([65.10, 14.77])
  .addTo(map)
  .bindPopup("<b>Hello world!</b><br />I am popup 1.")
  .openPopup();

Here's an example: http://jsfiddle.net/P543v/