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

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

Пытался так:

<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;
    }

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

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

Вложение 3621
Вложение 3622

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

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

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

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

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

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

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