[CSS] Triángulos con box shadows [Derecha,Izquierda,Arriba y Abajo]

En este código sabremos crear bocadillos de texto con sombras correctamente, muchos lo hacen e implementan mal el código ya que la sombra muestra el triángulo en blanco cuando no debería ser.

var botones = document.querySelectorAll("button");
for (var x = 0; x < botones.length; x++) {
botones.addEventListener("click", function() {
document.querySelector(".arrow").className = "arrow " + this.dataset.lado;
});
}

El javascript es para cambiar el lado del triángulo del bocadillo.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.tooltip {
text-decoration: underline;
color: #37b9b5;
cursor: default;
}

.tooltip-bubble {
position: absolute;
z-index: 1;
padding: 5px 10px;
color: #fff;
width: auto;
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
background-color: transparent;
border-radius: 10px;
margin:50px; /* añadido para que se vea mejor, bórralo después */
}

.tooltip-bubble div {
position: relative;
z-index: 1;
font-size: 12px;
}

.tooltip-bubble::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #706f6f;
border-radius: 10px;
}

.tooltip-bubble .arrow {
content: '';
display: block;
position: absolute;
width: 16px;
height: 16px;
border:0;
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
background:#706f6f;
transform:rotate(45deg);
z-index:-1;
left: -3px;
top:calc(50% - 8px);
}

.tooltip-bubble .arrow.down {
top: calc(100% - 8px);
left: calc(50% - 8px);
}

.tooltip-bubble .arrow.up {
top: -8px;
left: calc(50% - 8px);
}

.tooltip-bubble .arrow.right {
left:auto;
right:-3px;
}

<div class="tooltip-bubble">
<div>Tutorial de uso</div>
<div class="arrow down"></div>
</div>

<button data-lado="left">Izquierda</button>
<button data-lado="right">Derecha</button>
<button data-lado="up">Arriba</button>
<button data-lado="down">Abajo</button>