Контент выходит из тега td только в chrome, хорошо работает в IE11

---

Я пытаюсь создать всплывающую подсказку, расположенную справа от центра элемента наведения. Мой код хорошо работает в IE 11, но в Chrome содержимое выходит из всплывающей подсказки. Пожалуйста, помогите мне исправить это.

Что я уже пробовал:

<script type = "text/javascript" >
    Sys.Application.add_load(function() {
        var user = [];
        var sTag = [];
		var divTag = [];
		var apiURL = "/platformapi/core/System/user/"
		var groupApiURL = "/platformapi/core/System/group/user/"
        var temp, AccountStatus, Status, LastLoginDate, DisplayName, Helptext;
        var csrfToken = window.sessionStorage.getItem("x-csrf-token");
        var baseURL = window.location.protocol + '//' + window.location.host + parent.parent.ArcherApp.globals['baseUrl'];
        var nodeList = document.querySelectorAll(".SystemURL");

        for (i = 0; i < nodeList.length; i++) {
            user[i] = nodeList[i].getAttribute("href");
			var GroupName = [];
            if (user[i]) {
				groupURL = RestURL User[i];
				divTag = document.createElement('div');
				nodeList[i].appendChild(divTag);
				divTag.setAttribute("class","tooltiptext");
				runAjax1(divTag,groupURL);		
            }

        }
		
		function runAjax1(obj2,groupURL) {
			                $.ajax({
                    type: "POST",
                    url: groupURL,
                    contentType: "application/json",
                    dataType: "json",
                    processData: false,
                    async: true,
                    headers: {
                        'content-Type': "application/json",
                        'Accept': "application/json",
                    },
                    success: function(runfeed) {
                        Name = runfeed["RequestedObject"]["DisplayName"];
						Status = runfeed["RequestedObject"]["AccountStatus"];
						Group = runfeed["RequestedObject"]["Group"];
							Helptext =  '<table><tr>' + '<td id="header" >Name:</td>' + '<td id="value">'+Name+'</td>' + '</tr>' + 
			'<tr>' + '<td id="header">Status:</td>' + '<td id="value">'+Status+'</td>' + '</tr>' + 
			'<tr>' + '<td id="header">Groups:</td>' + '<td id="value">'+Group+'</td>' +'</tr></table>';
					obj2.innerHTML = Helptext;					
                    },
                    error: function(errormsg) {
                        console.log(JSON.stringify(errormsg.responseXML));
                    }

                });
		}
    });
</script>

<style type = "text/css" > 
#header {
	color: #1aa3ff;
	//width: 30%;
	border-bottom: 1px solid #cccccc;
	min-width: 50px;
}

#value {
	//width: 70%;
	border-bottom: 1px solid #cccccc;
	padding-left: 5px;
	min-width: 50px;
	max-width: 150px;
}

a.SystemURL {
    position: relative;
    display: inline;
	white-space: pre;
	word-break: break-word;
}
a.SystemURL .tooltiptext {
    position: absolute;
	width: auto;
	display: inline-block;
	color: #FFFFFF;
    background: #737373;
    border: 2px solid #000000;
    text-align: left;
    visibility: hidden;
    border-radius: 6px;
	z-index: 1;
    //left: 80%;
	margin-left: auto;
	padding: 10px;
	top: 50%;
	transform: translateY(-50%);
	white-space: pre;
}
a.SystemURL .tooltiptext:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -12px;
    width: 0; height: 0;
    border-right: 12px solid #000000;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}
a.SystemURL .tooltiptext:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    width: 0; height: 0;
    border-right: 8px solid #737373;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
.SystemURL:hover .tooltiptext {
  visibility: visible;
}

</style>

---