Merge pull request #2925 from somiaj/description-info-icon

ProblemSets: Place set description in info button.

Author: pstaabp

htdocs/js/System/system.js

@@ -74,7 +74,8 @@
 	// FIXME: These are really general purpose tooltips and not just in the homework sets editor.  So the class name
 	// should be chosen to better reflect this.
 	document.querySelectorAll('.set-id-tooltip').forEach((el) => {
-		if (el.dataset.bsTitle) new bootstrap.Tooltip(el, { fallbackPlacements: [] });
+		if (el.dataset.bsTitle)
+			new bootstrap.Tooltip(el, { fallbackPlacements: el.dataset.fallbackPlacements?.split(' ') || [] });
 	});
 
 	// Hardcopy tooltips shown on the Problem Sets page.

templates/ContentGenerator/ProblemSets/set_list_row.html.ep

@@ -17,9 +17,16 @@
 	<div class="ms-3 me-auto">
 		<div dir="ltr">
 			<%= link_to $display_name => $c->systemLink(url_for('problem_list', setID => $set->set_id)),
-				class => 'fw-bold set-id-tooltip',
-				data  => { bs_toggle => 'tooltip', bs_placement => 'right', bs_title => $set->description }
+				class => 'fw-bold'
 			=%>
+			% if ($set->description =~ /\S/) {
+				<a class="set-id-tooltip" role="button" tabindex="0" data-bs-placement="right"
+						data-bs-toggle="tooltip" data-bs-title="<%= $set->description =%>"
+						data-fallback-placements="top bottom">
+					<i class="icon fas fa-circle-info" aria-hidden="true"></i>
+					<span class="visually-hidden"><%= maketext('Assignment Description') =%></span>
+				</a>
+			% }
 		</div>
 		<div class="font-sm"><%= $status_msg %></div>
 		% if (!$set->visible && $authz->hasPermissions(param('user'), 'view_unopened_sets')) {