Fix unusual tooltip styles...

- Annotations: 3 dot menu tooltip - Ruler: left/right margin tooltip - follow the same rules as everywhere else (from jquery-ui-lightness file) Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com> Change-Id: Ia2dbe80e6550641e58c013679382de29bb0991ef
CollaboraOnline · Nov 4, 2020 · 869ae7f · 869ae7f
1 parent 5b862c5
commit 869ae7f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git a/loleaflet/css/jquery-ui-lightness.css b/loleaflet/css/jquery-ui-lightness.css
@@ -875,7 +875,8 @@ button.ui-button::-moz-focus-inner {
 }
 /* Component containers
 ----------------------------------*/
-.ui-widget {
+.ui-widget,
+[data-title]:after {
 	font-family: var(--jquery-ui-font);
 	font-size: 1.1em;
 }
@@ -912,17 +913,20 @@ button.ui-button::-moz-focus-inner {
 
 /*Tooltips
 ----------------------------------*/
-.ui-tooltip {
+.ui-tooltip,
+[data-title]:after {
 	padding: 7px 9px;
 	position: absolute;
 	z-index: 9999;
 	max-width: 300px;
 	background: #2a2a2a;
 }
-body .ui-tooltip {
+body .ui-tooltip,
+[data-title]:after {
 	border-width: 2px;
 }
-.ui-tooltip-content {
+.ui-tooltip-content,
+[data-title]:after {
 	font-size: 0.8em;
 	color: #fff;
 	background: #2a2a2a;
@@ -1285,24 +1289,28 @@ a.ui-button:active,
 ----------------------------------*/
 
 /* Corner radius */
+[data-title]:after,
 .ui-corner-all,
 .ui-corner-top,
 .ui-corner-left,
 .ui-corner-tl {
 	border-top-left-radius: 4px;
 }
+[data-title]:after,
 .ui-corner-all,
 .ui-corner-top,
 .ui-corner-right,
 .ui-corner-tr {
 	border-top-right-radius: 4px;
 }
+[data-title]:after,
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-left,
 .ui-corner-bl {
 	border-bottom-left-radius: 4px;
 }
+[data-title]:after,
 .ui-corner-all,
 .ui-corner-bottom,
 .ui-corner-right,
@@ -1316,7 +1324,8 @@ a.ui-button:active,
 	opacity: .5;
 	filter: Alpha(Opacity=50); /* support: IE8 */
 }
-.ui-widget-shadow {
+.ui-widget-shadow,
+[data-title]:after {
 	-webkit-box-shadow: 0px 0px 4px 2px rgb(217, 217, 217);
 	box-shadow: 0px 0px 4px 2px rgb(217, 217, 217);
 }
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
@@ -494,6 +494,26 @@ body {
 	padding: 0;
 	vertical-align: top;
 }
+/*Tooltips
+----------------------------------*/
+[data-title]:hover:after {
+	opacity: 1;
+	transition: all 0.1s ease 0.5s;
+	visibility: visible;
+}
+[data-title]:after {
+	content: attr(data-title);
+	font-size: 1em !important;
+	bottom: -1.6em;
+	left: 100%;
+	white-space: nowrap;
+	opacity: 0;
+	border-color: #2a2a2a;
+	visibility: hidden;
+}
+[data-title] {
+	position: relative;
+}
 
 .loleaflet-annotation-caption {
 	font-weight: bold;

diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js
@@ -241,13 +241,17 @@ L.Annotation = L.Layer.extend({
 			var acceptButton = this._acceptButton = L.DomUtil.create('button', 'loleaflet-redline-accept-button', tdAccept);
 			var tdReject = L.DomUtil.create(tagTd, 'loleaflet-annotation-menubar', tr);
 			var rejectButton = this._rejectButton = L.DomUtil.create('button', 'loleaflet-redline-reject-button', tdReject);
+			var acceptButtonTooltipText = _('Accept change');
+			var rejectButtonTooltipText = _('Reject change');
 
-			acceptButton.title = _('Accept change');
+			acceptButton.dataset.title = acceptButtonTooltipText;
+			acceptButton.setAttribute('aria-label', acceptButtonTooltipText);
 			L.DomEvent.on(acceptButton, click, function() {
 				this._map.fire('RedlineAccept', {id: this._data.id});
 			}, this);
 
-			rejectButton.title = _('Reject change');
+			rejectButton.dataset.title = rejectButtonTooltipText;
+			rejectButton.setAttribute('aria-label', rejectButtonTooltipText);
 			L.DomEvent.on(rejectButton, click, function() {
 				this._map.fire('RedlineReject', {id: this._data.id});
 			}, this);
@@ -256,7 +260,9 @@ L.Annotation = L.Layer.extend({
 		if (this.options.noMenu !== true && this._map.isPermissionEditForComments()) {
 			var tdMenu = L.DomUtil.create(tagTd, 'loleaflet-annotation-menubar', tr);
 			var divMenu = this._menu = L.DomUtil.create(tagDiv, this._data.trackchange ? 'loleaflet-annotation-menu-redline' : 'loleaflet-annotation-menu', tdMenu);
-			divMenu.title = _('Open menu');
+			var divMenuTooltipText = _('Open menu');
+			divMenu.dataset.title = divMenuTooltipText;
+			divMenu.setAttribute('aria-label', divMenuTooltipText);
 			divMenu.annotation = this;
 		}
 		if (this._data.trackchange) {