How can I add a custom Aria tooltip to an icon?

  • 1
  • Question
  • Updated 2 years ago
  • Answered
  • (Edited)
While many other posts on the community suggest Skuid uses JQuery Tooltips, I think they may be out of date. From what I can tell, 'Aria' is being used. Below is the desired tooltip on a row action, and it's html tag:



BEFORE HOVER:

<div class="nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible sk-icon-contact" role="button" tabindex="0" title="Show Contacts"></div>

AFTER HOVER: 

<div class="nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible sk-icon-contact" role="button" tabindex="0" title="" aria-describedby="ui-id-25"></div>


I'd like to achieve the same effect with my exclamation mark in a custom field renderer. I've tried to replicate the HTML, but clearly the tooltip on the 'Show Contacts' button is being registered somewhere before the DOM loads. How can I achieve the same effect?







<div title="At Risk" class="renewal-status nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible fa fa-exclamation"></div>
Photo of Henry Goddard

Henry Goddard

  • 776 Points 500 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Henry Goddard

Henry Goddard

  • 776 Points 500 badge 2x thumb
I'm waaay off. Aria is merely an accessibility thing. All I was looking for was the nicely built:


.skootip()<br>
   That's all I needed, thanks https://community.skuid.com/skuid/topics/add_ability_to_display_icon_only_add_tooltips_to_tabs_butto...