Skip to main content
Solved

CSS for "Formatted Description" tooltip in AssystNet


jyork
Sidekick (Customer)
Forum|alt.badge.img+9
  • Sidekick (Customer)
  • 73 replies

Has anyone figured out how to adjust the CSS for these tooltips? If I have a tooltip that is long it goes to the very edge of the page, so I’d like to change the width to make it more compact.

 

 

Best answer by Steve Miller

  You probably want something like this…

.tundra .dijitTooltipDialogPopup, .tundra .axiosUserTooltipDialogPopup {
    width: min-content;
}

 

Some extra detail

<div class="dijitPopup dijitTooltipDialogPopup" role="region" aria-label="dijit_TooltipDialog_5" id="widget_uniqName_9_74_dropdown" dijitpopupparent="" style="visibility: visible; top: 563px; left: 1004px; right: auto; z-index: 1000; height: auto; overflow-y: visible; display: none;"><div role="alertdialog" tabindex="-1" class="dijitTooltipDialog dijitTooltipRight" id="dijit_TooltipDialog_5" widgetid="dijit_TooltipDialog_5" style="top: 0px; visibility: visible;">
	<div class="dijitTooltipContainer" role="presentation">
		<div data-dojo-attach-point="contentsNode" class="dijitTooltipContents dijitTooltipFocusNode">
			<div data-dojo-attach-point="containerNode">This is where the tooltip text is </div>

		</div>
	</div>
	<div class="dijitTooltipConnector" role="presentation" data-dojo-attach-point="connectorNode" style="top: 20px;"></div>
</div></div>

Most of the rules seem to be in a file ‘Tooltip.scss’. Here are some of the related rules that I have found….

.dijitPopup {}

.tundra .dijitTooltipDialogPopup, .tundra .axiosUserTooltipDialogPopup {}

.tundra .dijitTooltip, .tundra .dijitTooltipDialog {}

.tundra .dijitTooltipRight {}

.dijitTooltipFocusNode {}

 

View original
Did this topic help you find an answer to your question?

2 replies

Forum|alt.badge.img+12
  • Hero (Customer)
  • 141 replies
  • Answer
  • October 25, 2023

  You probably want something like this…

.tundra .dijitTooltipDialogPopup, .tundra .axiosUserTooltipDialogPopup {
    width: min-content;
}

 

Some extra detail

<div class="dijitPopup dijitTooltipDialogPopup" role="region" aria-label="dijit_TooltipDialog_5" id="widget_uniqName_9_74_dropdown" dijitpopupparent="" style="visibility: visible; top: 563px; left: 1004px; right: auto; z-index: 1000; height: auto; overflow-y: visible; display: none;"><div role="alertdialog" tabindex="-1" class="dijitTooltipDialog dijitTooltipRight" id="dijit_TooltipDialog_5" widgetid="dijit_TooltipDialog_5" style="top: 0px; visibility: visible;">
	<div class="dijitTooltipContainer" role="presentation">
		<div data-dojo-attach-point="contentsNode" class="dijitTooltipContents dijitTooltipFocusNode">
			<div data-dojo-attach-point="containerNode">This is where the tooltip text is </div>

		</div>
	</div>
	<div class="dijitTooltipConnector" role="presentation" data-dojo-attach-point="connectorNode" style="top: 20px;"></div>
</div></div>

Most of the rules seem to be in a file ‘Tooltip.scss’. Here are some of the related rules that I have found….

.dijitPopup {}

.tundra .dijitTooltipDialogPopup, .tundra .axiosUserTooltipDialogPopup {}

.tundra .dijitTooltip, .tundra .dijitTooltipDialog {}

.tundra .dijitTooltipRight {}

.dijitTooltipFocusNode {}

 


Forum|alt.badge.img+9
  • Sidekick (Customer)
  • 40 replies
  • December 13, 2023

jed, did you end up modifying this? How did it turn out?


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings