JSFiddle - React, Tailwind, and code Playground

Experimenting with positioning tooltip sprouts.

by nilloc

HTML

<div class='draggable-text'>this is draggable code</div>

SCSS

*, *::before, *::after{
  box-sizing:border-box;
}

.draggable-text{
  font-family:monospace;
  background:white;
  display:inline-block;
  position:relative;
  margin:0 2ch;
  padding:2px 6px 2px 0;
  height:20px;
  box-shadow:0 2px 3px rgba(0,0,0,0.2);
  z-index:1;
  border-radius: 0px 4px 4px 0px;
  
  /* border:1px solid lightgray; */
  /* border-left:none; */
  
  &::before, 
  //&::after
  {
    content:"";
    display:block;
    position:absolute;
    background:white;
    height:14.145px;
    width:14.145px;
    transform-origin:50% 50%;
    transform:rotate(45deg);
    left:-7px;
    top:3px;
    z-index:-1;
    
    /* border-left:1px solid lightgray; */
    /* border-bottom:1px solid lightgray; */
    border-radius:1px;
  }
/*   &::after{
    left:auto;
    right:-7px;
  } */
}