JSFiddle - React, Tailwind, and code Playground

Experimenting with positioning tooltip sprouts.

by nilloc

HTML

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

SCSS

body{background-color:teal}

*, *::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:0.5px 0px 0.5px 4px;
  }
  &::after{
    display:none;
  }
  
  &.pointed, &.rounded{
    border-radius: 0px;
  }
  &.pointed, &.rounded{
    &::after{
      display:block;
      transform:rotate(225deg);
      left:auto;
      top:3px;
      right:-7px;
    }
  }
  &.rounded{
    &::before, &::after{
      top:2px;
      height:16px;
      width:16px;
      border-radius:3px 0px 3px 10px;
    }
  }

}