Add tooltip

BrightspaceUILabs · Aug 14, 2023 · 3fff429 · 3fff429
1 parent c5500fa
commit 3fff429
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/attribute-picker.js b/attribute-picker.js
@@ -1,4 +1,5 @@
 import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/tooltip/tooltip.js';
 import './multi-select-list.js';
 import './multi-select-list-item.js';
 import { css, html, LitElement } from 'lit';
@@ -202,7 +203,7 @@ class AttributePicker extends RtlMixin(Localizer(LitElement)) {
 		const ariaRequired = this.required ? true : undefined;
 
 		return html`
-		<div role="application" class="${classMap(containerClasses)}" aria-invalid="${ifDefined(ariaInvalid)}" aria-required=${ifDefined(ariaRequired)}>
+		<div role="application" id="d2l-attribute-picker-container" class="${classMap(containerClasses)}" aria-invalid="${ifDefined(ariaInvalid)}" aria-required=${ifDefined(ariaRequired)}>
 			<div class="d2l-attribute-picker-content" aria-busy="${this._isNotActive()}" role="${this.attributeList.length > 0 ? 'list' : ''}">
 				${this.attributeList.map((item, index) => html`
 					<d2l-labs-multi-select-list-item
@@ -261,6 +262,10 @@ class AttributePicker extends RtlMixin(Localizer(LitElement)) {
 				</ul>
 			</div>
 		</div>
+
+		${!isValid ? html`
+			<d2l-tooltip for="d2l-attribute-picker-container" state="error" announced position="top" ?force-show=${this._inputFocused}>${this.localize('oneAttributeRequired')}</d2l-tooltip>
+		` : null}
 		`;
 	}
 

diff --git a/test/attribute-picker.test.js b/test/attribute-picker.test.js
@@ -391,6 +391,12 @@ describe('attribute-picker', () => {
 			expect(el._inputFocused).to.be.false;
 			expect(el._initialFocus).to.be.true;
 
+			let invalidIcon = el.shadowRoot.querySelector('.d2l-input-text-invalid-icon');
+			expect(invalidIcon).to.not.exist;
+
+			let tooltip = el.shadowRoot.querySelector('d2l-tooltip');
+			expect(tooltip).to.not.exist;
+
 			const pageNumberInput = el.shadowRoot.querySelector('input');
 			pageNumberInput.focus();
 			await el.updateComplete;
@@ -407,15 +413,23 @@ describe('attribute-picker', () => {
 			expect(attributeContainer.hasAttribute('aria-required')).to.be.true;
 			expect(attributeContainer.hasAttribute('aria-invalid')).to.be.true;
 
-			let invalidIcon = el.shadowRoot.querySelector('.d2l-input-text-invalid-icon');
+			invalidIcon = el.shadowRoot.querySelector('.d2l-input-text-invalid-icon');
 			expect(invalidIcon).to.exist;
 
+			tooltip = el.shadowRoot.querySelector('d2l-tooltip');
+			expect(tooltip).to.exist;
+			expect(tooltip.innerHTML).to.contain('At least one attribute must be selected');
+
 			el.addAttribute(attributeList[0]);
 			await el.updateComplete;
 
 			expect(attributeContainer.hasAttribute('aria-invalid')).to.be.false;
+
 			invalidIcon = el.shadowRoot.querySelector('.d2l-input-text-invalid-icon');
 			expect(invalidIcon).to.not.exist;
+
+			tooltip = el.shadowRoot.querySelector('d2l-tooltip');
+			expect(tooltip).to.not.exist;
 		});
 	});