<div class="tooltip top">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip bottom" style="--r:40px;--t:30px;--p:20%">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip right" style="--r:10px;--t:30px;--a:90deg;--p:60%">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip left" style="--r:15px;--t:50px;--a:30deg;--p:30%">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>

.tooltip {
  --r: 20px;  /* radius */
  --t: 20px;  /* the arrow/tail size */
  --a: 60deg; /* the angle of the tail*/
  --p: 50%;   /* the position */
  
  width: 200px;
  display: inline-block;
  margin: 20px;
  font-size: 18px;
  background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
  color: #fff;
  --_main:
    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000) 0 0/var(--r) var(--r) space padding-box;
  --_g: #0000,#000 1deg var(--a),#0000 calc(var(--a) + 1deg);
  padding: calc(2*var(--r)/3);
  -webkit-mask: var(--m);
          mask: var(--m);
}

.top {
   --m: 
     conic-gradient(from calc(180deg - var(--a)/2) at var(--p) 0%, var(--_g)) 
       top/100% 50% no-repeat,
     var(--_main);
   border-top: var(--t) solid #0000;
}
.bottom {
  --m:
    conic-gradient(from calc(var(--a)/-2) at var(--p) 100%, var(--_g)) 
     bottom/100% 50% no-repeat,
    var(--_main);
   border-bottom: var(--t) solid #0000;
}
.left {
  --m:
    conic-gradient(from calc(90deg - var(--a)/2) at 0% var(--p),var(--_g)) 
     left/50% 100% no-repeat,
    var(--_main);   
  border-left: var(--t) solid #0000;
}
.right {
  --m:
    conic-gradient(from calc(-90deg - var(--a)/2) at 100% var(--p),var(--_g)) 
     right/50% 100% no-repeat,
    var(--_main);  
  border-right: var(--t) solid #0000;
}


body {
  margin: 0;
  min-height: 100vh;
}