feat(ui5-button): implement title property (#2492)

Author: fifoosid

packages/main/src/Button.hbs

@@ -25,7 +25,7 @@
 			style="{{styles.icon}}"
 			class="ui5-button-icon"
 			name="{{icon}}"
-			show-tooltip={{iconOnly}}
+			show-tooltip={{showIconTooltip}}
 		></ui5-icon>
 	{{/if}}
 

packages/main/src/Button.js

@@ -110,6 +110,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the tooltip of the button.
+		 * <br>
+		 * <b>Important:</b> Tooltips should only be set to icon only buttons.
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @private
+		 * @since 1.0.0-rc.11
+		 */
+		title: {
+			type: String,
+		},
+
 		/**
 		 * Used to switch the active state (pressed or not) of the <code>ui5-button</code>.
 		 * @private
@@ -187,6 +200,7 @@ const metadata = {
 		_iconSettings: {
 			type: Object,
 		},
+
 		_buttonAccInfo: {
 			type: Object,
 		},
@@ -370,7 +384,7 @@ class Button extends UI5Element {
 			"ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded),
 			"ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls,
 			"ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
-			"title": this._buttonAccInfo && this._buttonAccInfo.title,
+			"title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title),
 		};
 	}
 
@@ -400,6 +414,10 @@ class Button extends UI5Element {
 		return this.nonFocusable ? "-1" : this._tabIndex;
 	}
 
+	get showIconTooltip() {
+		return this.iconOnly && !this.title;
+	}
+
 	get styles() {
 		return {
 			icon: {

packages/main/test/pages/Button.html

@@ -188,6 +188,15 @@
     <ui5-button class="long-button" icon="download">Download</ui5-button>
     <ui5-button class="long-button long-button-end" icon="download">Download</ui5-button>
 
+	<br/>
+	<br/>
+	<ui5-title>Buttons with tooltip</ui5-title>
+	<br/>
+	<ui5-button icon="home" title="Go home"></ui5-button>
+	<ui5-button icon="accept" title="Accept terms & conditions"></ui5-button>
+	<ui5-button icon="action-settings" title="Go to settings"></ui5-button>
+	<ui5-button icon="alert" title="Fire an alert"></ui5-button>
+	<ui5-button icon="arrow-down" title="Go down"></ui5-button>
 
     <script>
 		var clickCounter = document.querySelector("#click-counter");