<div>tooltip with clip-path</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 10px 15px;
  position: relative;
  cursor: pointer;
  transition: all .2s linear;
    
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    border: 2px solid red;
    border-radius: 10rem;
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    clip-path: polygon(
      0 0, 
      calc(50% - 4px) 0, calc(50% - 7px) 2px, calc(50% + 7px) 2px, calc(50% + 4px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
    z-index: -1;
    box-sizing: border-box;
    transition: all .2s linear;
    
  }
  
  &::after {
    content: '';
    height: 10px;
    width: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid red;
    position: absolute;
    top: -3px;
    left: calc(50% - 5px);
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
    transform: rotate(135deg);
    z-index: 2;
    box-sizing: border-box;
    transition: all .2s linear;
    
  }
  
  // &:hover::after {
  //   transform: translateY(-50px) rotate(135deg);
  // }
  // &:hover::before {
  //   transform: translateY(100px);
  // }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.