Мне нужно использовать плагины JS no JQuery, чтобы сделать простую подсказку, как на изображении ниже.

Нажмите на "?" изображение должно открыть эту подсказку и снова щелкнуть по тому же изображению, чтобы закрыть его. Я думаю, что это просто для кого-то с хорошим знанием JS, но я все равно не могу это сделать :(

Это то, что я пробовал, я знаю, что это не слишком много, но я просто застрял.
Как отобразить его как на картинке, как скрыть, когда он открыт, и как добавить этот маленький треугольник в угол?

myfiddle

<img id="info" src="http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png"/>
<div id="ttip">bla bla</div>

document.getElementById('info').addEventListener('click', function(){
    // how to check if it's visible so I can close tooltip
    document.getElementById('ttip').style.display="block";    
});

#info{margin-left:100px;margin-top:50px;}
#ttip
{
    width: 280px;
z-index: 15001;
top: 0px;
left: 0px;
display: none;
    border-color: #666;
background-color: #fff;
color: #666;
    position: relative;
border: 1px solid #666;
padding: 15px 9px 5px 9px;
text-align: left;
word-wrap: break-word;
overflow: hidden;
}