textSize, textOnly and style Options, and top/down direction options.

dist/leaflet.label-src.js

@@ -29,13 +29,18 @@ var LeafletLabel = L.Class.extend({
 
 	includes: L.Mixin.Events,
 
+	_directions: [ 'top', 'right', 'bottom', 'left' ],
+
 	options: {
 		className: '',
 		clickable: false,
 		direction: 'right',
 		noHide: false,
 		offset: [12, -15], // 6 (width of the label triangle) + 6 (padding)
 		opacity: 1,
+		textsize: "10px",
+		textOnly: false,
+        style: null,
 		zoomAnimation: true
 	},
 
@@ -47,11 +52,15 @@ var LeafletLabel = L.Class.extend({
 		this._isOpen = false;
 	},
 
+	_isOnMarker: function () {
+		return this._source instanceof L.Marker;
+	},
+
 	onAdd: function (map) {
 		this._map = map;
 
 		this._pane = this.options.pane ? map._panes[this.options.pane] :
-			this._source instanceof L.Marker ? map._panes.markerPane : map._panes.popupPane;
+            this._isOnMarker() ? map._panes.markerPane : map._panes.popupPane;
 
 		if (!this._container) {
 			this._initLayout();
@@ -142,6 +151,15 @@ var LeafletLabel = L.Class.extend({
 
 	_initLayout: function () {
 		this._container = L.DomUtil.create('div', 'leaflet-label ' + this.options.className + ' leaflet-zoom-animated');
+		this._container.style.fontSize = this.options.textsize;
+		if (this.options.textOnly) { L.DomUtil.addClass(this._container, 'leaflet-label-text-only'); }
+        if (this.options.style) {
+            for (var property in this.options.style) {
+                if (this.options.style.hasOwnProperty(property)) {
+                    this._container.style[property] = this.options.style[property];
+                }
+            }
+        }
 		this.updateZIndex(this._zIndex);
 	},
 
@@ -176,39 +194,75 @@ var LeafletLabel = L.Class.extend({
 		this._setPosition(pos);
 	},
 
+	_getIconHeight: function () {
+		return this._source.options.icon ? this._source.options.icon.options.iconSize[1] : 0;
+	},
+
 	_setPosition: function (pos) {
 		var map = this._map,
 			container = this._container,
 			centerPoint = map.latLngToContainerPoint(map.getCenter()),
 			labelPoint = map.layerPointToContainerPoint(pos),
-			direction = this.options.direction,
+			direction = this._getDirection(),
 			labelWidth = this._labelWidth,
-			offset = L.point(this.options.offset);
+			offset = L.point(this.options.offset),
+			verticalOffset = offset.y;
 
-		// position to the right (right or auto & needs to)
-		if (direction === 'right' || direction === 'auto' && labelPoint.x < centerPoint.x) {
-			L.DomUtil.addClass(container, 'leaflet-label-right');
-			L.DomUtil.removeClass(container, 'leaflet-label-left');
+		if (direction === 'top') {
+			verticalOffset -= this._isOnMarker() ? this._getIconHeight() : 0;
 
-			pos = pos.add(offset);
-		} else { // position to the left
-			L.DomUtil.addClass(container, 'leaflet-label-left');
-			L.DomUtil.removeClass(container, 'leaflet-label-right');
+			pos = pos.add(L.point(-labelWidth / 2, verticalOffset));
+		} else if (direction === 'bottom') {
+			verticalOffset += this._isOnMarker ? this._getIconHeight() : 0;
 
+			pos = pos.add(L.point(-labelWidth / 2, verticalOffset));
+		} else if (direction === 'right' || direction === 'auto' && labelPoint.x < centerPoint.x) {
+			direction = 'right';
+			pos = pos.add(offset);
+		} else {
+			direction = 'left';
 			pos = pos.add(L.point(-offset.x - labelWidth, offset.y));
 		}
 
+		this._setProperClass(pos, direction);
 		L.DomUtil.setPosition(container, pos);
 	},
 
+	_generateLabelClass: function (direction) {
+		return 'leaflet-label-' + direction;
+	},
+
+	_setProperClass: function (pos, _direction) {
+		var map = this._map,
+			container = this._container,
+			direction = _direction || this._getDirection(),
+			labelPoint = map.layerPointToContainerPoint(pos),
+			centerPoint = map.latLngToContainerPoint(map.getCenter()),
+			classToAdd = this._generateLabelClass(direction);
+
+		for (var i = 0; i < this._directions.length; i++) {
+			var d = this._directions[i];
+			if (d !== direction) {
+				var classToRemove = this._generateLabelClass(d);
+				L.DomUtil.removeClass(container, classToRemove);
+			}
+		}
+
+		L.DomUtil.addClass(container, classToAdd);
+	},
+
+	_getDirection: function () {
+		return this.options.direction;
+	},
+
 	_zoomAnimation: function (opt) {
 		var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
 
 		this._setPosition(pos);
 	},
 
 	_onMoveEnd: function () {
-		if (!this._animated || this.options.direction === 'auto') {
+		if (!this._animated || this._getDirection() === 'auto') {
 			this._updatePosition();
 		}
 	},

dist/leaflet.label.css

@@ -31,6 +31,7 @@
 .leaflet-label:after {
 	border-top: 6px solid transparent;
 	border-bottom: 6px solid transparent;
+	border-right: 6px solid transparent;
 	content: none;
 	position: absolute;
 	top: 5px;
@@ -45,10 +46,74 @@
 .leaflet-label:after {
 	border-left: 6px solid black;
 	border-left-color: inherit;
-	right: -10px;
+	right: -16px;
 }
 
+.leaflet-label-top:after,
+.leaflet-label-top:before {
+	left: -50%;
+	border-top-color: black;
+	border-top-color: rgba(0,0,0,0.25);
+	position: relative;
+	top: 29px;
+}
+
+.leaflet-label-top:before {
+	display: none;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	border-left-color: transparent;
+	border-top-color: transparent;
+}
+
+.leaflet-label-top:after {
+	content: ' ';
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	border-left-color: transparent;
+}
+
+.leaflet-label-bottom:before {
+	display: none;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	border-left-color: transparent;
+	border-top-color: transparent;
+}
+
+.leaflet-label-bottom:after,
+.leaflet-label-bottom:before {
+	left: -50%;
+	border-bottom-color: black;
+	border-bottom-color: rgba(0,0,0,0.25);
+	position: relative;
+	top: -28px;
+}
+
+.leaflet-label-bottom:after {
+	border-right-color: transparent;
+	border-top-color: transparent;
+	border-left-color: transparent;
+}
+
+.leaflet-label-bottom:after,
+.leaflet-label-top:after,
 .leaflet-label-right:before,
 .leaflet-label-left:after {
 	content: "";
 }
+
+.leaflet-label.leaflet-label-text-only,
+.leaflet-label.leaflet-label-text-only:before,
+.leaflet-label.leaflet-label-text-only:after {
+	background: none;
+	border: none;
+}
+
+.leaflet-label.leaflet-label-text-only.leaflet-label-left {
+	margin-right: -10px;
+}
+
+.leaflet-label.leaflet-label-text-only.leaflet-label-right {
+	margin-left: -10px;
+}