Я работаю над отображением определенных деталей на карте при наведении на верхнюю часть карты, используя AngularJS, Angular Material и CSS.
Это код, созданный ручкой- https://codepen.io/SSPai/pen/oyVmZg
<md-button md-no-ink class="member-card" ng-click="">
<div layout="column" layout-align="center center">
<!-- The details should be shown upon hovering over "top-card-container" only -->
<div class="top-card-container">
<div class="member-photo-background mem-image"><md-icon class="member-photo">account_circle</md-icon></div>
<div class="member-details-part">
<div layout="column" layout-align="space-around stretch">
<div layout="row" layout-align="space-around center" class="member-details member-details-start">
<md-icon class="member-detail-info member-detail-icon">location_on</md-icon>
<div flex
class="member-card-data member-detail-info member-details-value member-title">
<div
ng-bind="memberLocation"></div>
<md-tooltip md-direction="right"
ng-if="memberLocation">
{{memberLocation}}
</md-tooltip>
</div>
</div>
</div>
</div>
</div>
<div class="member-name-bar" layout="row" layout-align="center center">
<div class=" member-card-data member-name">
<div
ng-bind="memberDisplayName">
</div>
<!-- Even this display of tooltip in IE is not working-->
<md-tooltip>{{memberDisplayName}}</md-tooltip>
</div>
</div>
</div>
</md-button>
Проблема в том, что вышеуказанный код отлично работает в Chrome, но не в IE11. В IE11 при наведении применяется свойство наведения кнопки по умолчанию, что нежелательно.
В IE11: Детали при наведении не отображаются, а всплывающая подсказка при наведении курсора на имя в нижней части карты не отображается.
Помогите, пожалуйста, совместить кодовое перо с IE11.