编辑工具提示，使其触摸移动和响应只有CSS？

Question

我设法创建了一个css3工具提示，该工具提示效果很好，但无法在触摸设备（移动设备）上工作，而且根本没有响应......

这是链接：https://jsfiddle.net/zo13quf3/1/

<span class="tool" data-tip="Hyper Text Makeup Language">HTML</span>



.tool {
  cursor : help;
  position : relative;
}

.tool::before, .tool::after {
  position : absolute;
  left : 50%;
  opacity : 0;
  z-index: -100;
}

.tool:hover::before, .tool:focus::before, .tool:hover::after, .tool:focus::after {
  opacity : 1;
  z-index: 100;
}

.tool::before {
  border-style : solid;
  border-width : 1em .75em 0 .75em;
  border-color : #3e474f transparent transparent transparent;
  bottom : 100%;
  margin-left : -.5em;
  content : " ";
}

.tool::after {
  background : #3e474f;
  border-radius : .25em;
  bottom : 180%;
  color : white;
  width : 17.5em;
  padding: 1em;
  margin-left : -8.75em;
  content : attr(data-tip);
}

是否可以通过CSS3实现移动触控和响应？ 如果不是，你知道我要用最小的js代码做什么吗？

由于 亲切的问候