Tooltip on grid row selector not working.

[Fred]

I'm using the latest version of the ASP.NET Ajax tools with .NET framework 4.8. I'm attempting to change the color and add a tooltip on grid's row selector based on value of one it's columns. The color of the row selector changes as expected.  However, the tooltip or title doesn't display at all on the mouseover. No error is shown in the browser's Dev Tools.  Below is the HTML markup and JS. 

FYI: I have successfully done this before not sure why it not working in this instance. Also, the grid is contained withing an TabStrip MultiPageview. Not sure if that would make a difference.

Thanks in advance for any help on this.

Markup

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True"></telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" RenderMode="Lightweight" Skin="Bootstrap"></telerik:RadSkinManager>
<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" AutoTooltipify="true" Skin="Bootstrap"></telerik:RadToolTipManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" RenderMode="Lightweight" Skin="Bootstrap"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="Grid3Panel" runat="server" LoadingPanelID="RadAjaxLoadingPanel2">
	<telerik:RadGrid ID="Grid3" runat="server" Width="100%" Skin="Bootstrap" RenderMode="Lightweight" AutoGenerateColumns="false" DataSourceID="dsGrid3" AllowPaging="true" PagerStyle-AlwaysVisible="true" PageSize="50" CssClass="Gridheight2">
		<ClientSettings>
			<Scrolling AllowScroll="true" UseStaticHeaders="true" />
			<Selecting AllowRowSelect="true" CellSelectionMode="SingleCell" />
			<Resizing AllowRowResize="true" EnableRealTimeResize="True" ResizeGridOnColumnResize="true" AllowColumnResize="True" />
			<ClientEvents OnGridCreated="Grid3_OnGridCreated" />
		</ClientSettings>
	<MasterTableView DataKeyNames="Check_Number" HeaderStyle-Font-Bold="true" HeaderStyle-Width="200px" ItemStyle-Font-Size="8pt" CommandItemDisplay="Top" CommandItemSettings-ShowRefreshButton="true" CommandItemSettings-ShowAddNewRecordButton="false">							
		<Columns>
			<telerik:GridBoundColumn DataField="Check_Number" UniqueName="Check_Number" HeaderText="Check Number" DataType="System.String"></telerik:GridBoundColumn>
			<telerik:GridBoundColumn DataField="Member_Name" UniqueName="Member_Name" HeaderText="Payee Name" DataType="System.String"></telerik:GridBoundColumn>
			<telerik:GridBoundColumn DataField="Member_ID" UniqueName="Member_ID" HeaderText="Payee ID" DataType="System.String"></telerik:GridBoundColumn>
			<telerik:GridBoundColumn DataField="SSN" UniqueName="SSN" HeaderText="SSN" DataFormatString="{0:###-##-####}"></telerik:GridBoundColumn>
			<telerik:GridBoundColumn DataField="Payment_Amount" UniqueName="Payment_Amount" HeaderText="Check Amount" DataType="System.Double" DataFormatString="{0:c}"></telerik:GridBoundColumn>
			<telerik:GridBoundColumn DataField="Payment_Date" UniqueName="Payment_Date" HeaderText="Check Date" DataType="System.DateTime" DataFormatString="{0:d}"></telerik:GridBoundColumn>
			</Columns>
	</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>

JS
 

function Grid3_OnGridCreated(s, e) {
	var masterview = s.get_masterTableView();
	var datarows = masterview.get_dataItems();
	for (i = 0; i < datarows.length; i++) {
		var rowselector3 = '';
		if (datarows[i]._element.cells['0'].className == 'rgResizeCol') {
			rowselector3 = datarows[i]._element.cells['0'];
			if (rowselector3 !== null) {
				var ssn = datarows[i].get_cell("SSN").innerText.replace("-", "");
				ssn = ssn.trim()
				if (ssn.length == 0) {
					rowselector3.title = "Member has no SSN - This may cause an issue with payment.";
					rowselector3.bgColor = '#ffc107';
				}
			}
		}
	}
}