Тултип со стрелкой

[AlexTrader]

Доброго времени суток, форумчане! Подскажите пожалуйста как с помощью css сделать такой тултип:
tooltip.png

[AlexTrader]

Пытался так:

<span class="left-sort-tooltip" data-tooltip="Тултип">Инфо</span>

.left-sort-tooltip {
        cursor: help;
    }

    .left-sort-tooltip::after {
        background: white;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
        color: gray;
        content: attr(data-tooltip); 
        opacity: 0; 
        padding: 10px;
        position: absolute;
        transition: all 0.4s ease-in-out; 
        font-family: Helvetica, Arial, sans-serif;
        font-size: 9px;
        width: 100%;
    }

    .left-sort-tooltip:hover::after {
        opacity: 1; 
        visibility: visible;
    }

    .left-sort-tooltip:hover::before {
        content: "";
        left: 30%;
        position: absolute;
        z-index: 99;
        border: 20px solid transparent;
        border-right: 15px solid white;
    }

[AlexTrader]

Тултип появляется сразу за текстом, а стрелка всегда в одном и том же месте, не привязана к тултипу, ещё и без shadow

[ksa]

как с помощью css сделать такой тултип

Чего именно не получается? Треугольник челе вверху слева?

[AlexTrader]

tooltip2.png
tooltip3.png

[AlexTrader]

на первой ссылке более менее нормально, но нет тени

[AlexTrader]

На второй треугольник уехал

[AlexTrader]

Но хотелось бы чтоб треугольник был как в топе на картинке, с тенью, в общем нужно повторить первую картинку, если поможет могу ссылку дать где эталон тултипа есть

[AlexTrader]

ksa,
Можете что подсказать?

[ksa]

Можете что подсказать?

Во всех примерах прибамбаска делается к родительскому элементу... А прибамбаска к прибамбаске - не нашел.

Как вариант, оборачивать спан еще одним спаном, а потом соединять треугольник с прямоуголником, в котором текст подсказок...

Вот треугольники как делать к родительским элементам
http://htmlbook.ru/blog/treugolniki-cherez-css