Переход на всплывающую подсказку не работает в IE, хорошо работает в Google Chrome

Question

Я проверил соответствующие посты о переходах, не работающих в IE, но я не могу понять, что не так с этим.

[tooltip] {
	position: relative;
  margin: 100px;
}

/* Arrow */
[tooltip]:before {
	width: 16px;
	height: 6px;
	left: 50%;
	margin-top: 2px;
	top: calc(100% - 10px);
	content: '';
	position: absolute;
	z-index: 10;
	box-sizing: border-box;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 10px solid #00204e;
	transform: translate(-50%, 0%);
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
}

/* Text */
[tooltip]:after {
	transform: translate(-50%, 0%);
	left: 50%;
	margin-top: 11px;
	top: calc(100% - 10px);
	font-weight: normal;
	text-shadow: none;
	background: #00204e;
	border-radius: 4px;
	color: #fff;
	content: attr(tooltip);
	padding: 10px;
	position: absolute;
	white-space: normal;
	width: 150px;
	width: max-content;
	font-size: 10px;
	font-family: 'Helvetica Neue';
	line-height: normal;
	max-width: 150px;
	text-align: left;
	height: auto;
	display: inline-block;
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
	z-index: 10;
}

[tooltip]:hover {
}

[tooltip]:hover::before,
[tooltip]:hover::after {
	opacity: 1;
	pointer-events: auto;
	top: calc(100% + 0px);
	overflow: visible;
    z-index: 10;
}

<span tooltip="I am a tooltip.">Tooltip</span>

Когда вы наводите курсор на всплывающую подсказку, эффект перехода отлично работает в Google Chrome, но не в Internet Explorer. Я даже пытался добавить пустой CSS при наведении курсора, когда искал похожую вещь для IE, но это тоже не работает. Любая помощь по этому вопросу?

Answer 1

Я думаю, вам не нужно использовать calc для этого.

[tooltip] {
	position: relative;
  margin: 100px;
}

/* Arrow */
[tooltip]:before {
	width: 16px;
	height: 6px;
	left: 50%;
	margin-top: 2px;
	top: 10px;
	content: '';
	position: absolute;
	z-index: 10;
	box-sizing: border-box;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 10px solid #00204e;
	transform: translate(-50%, 0%);
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
}

/* Text */
[tooltip]:after {
	transform: translate(-50%, 0%);
	left: 50%;
	margin-top: 11px;
	top: 10px;
	font-weight: normal;
	text-shadow: none;
	background: #00204e;
	border-radius: 4px;
	color: #fff;
	content: attr(tooltip);
	padding: 10px;
	position: absolute;
	white-space: normal;
	width: 150px;
	width: max-content;
	font-size: 10px;
	font-family: 'Helvetica Neue';
	line-height: normal;
	max-width: 150px;
	text-align: left;
	height: auto;
	display: inline-block;
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
	z-index: 10;
}

[tooltip]:hover {
}

[tooltip]:hover::before,
[tooltip]:hover::after {
	opacity: 1;
	pointer-events: auto;
	top: 20px;
	overflow: visible;
    z-index: 10;
}

<span tooltip="I am a tooltip.">Tooltip</span>