Twitter Bootstrap: tooltips on html map area

Question

Tooltips from twiiter bootstrap is great, but they didnt work with <area> tags :( How can I fix it?

I've noticed that js works, tooltip element is created, but it's position is wrong..

I've made a little example. http://jsfiddle.net/dhkFN/1/

Answer 1

I love Twitter bootstrap but some of the js plugins are a little simple in their current form.

Checkout qTip 2 - http://qtip2.com/

Does everything including image maps - http://qtip2.com/demos/#imagemaps

and you can just adjust the output classes to the bootstrap ones.

Answer 2

I had to do something similar recently with Bootstrap and tried to get tooltips working with image map areas but gave up.

I went with ImageMaster which is a jQuery plugin for making image maps and has options like tooltips etc

http://www.outsharked.com/imagemapster/

https://github.com/jamietre/ImageMapster

ImageMapster did have a few issues with Bootstrap's CSS but the author kindly fixed that issue for me, so it should work great!