i have image map , use built-in tooltips provided bootstrap when user hovers on specific part of image.
the issue i'm having tooltip not show in right place. right shows @ top left corner of image areas of image map.
how can move tooltips under respective areas without having reposition each tooltip individually? should automatically within rec defined.
here map code using:
<img id="image-maps-com-process-map" src="images/osh drawing.png" border="0" width="600" height="600" orgwidth="600" orgheight="600" usemap="#process-map" alt="" /> <map name="process-map" id="imagemapscom-process-map"> <area alt="" title="wood burning stove" href="#" class="tooltip-bot" data-original-title="title text here" shape="rect" coords="478,186,572,296" style="outline:none;" target="_self" /> <area alt="" title="rough cut lumber" href="#" class="tooltip-bot" data-original-title="title text here" shape="rect" coords="184,1,395,148" style="outline:none;" target="_self" /> <area alt="this description maybe" title="distributing" href="#"class="tooltip-bot" data-original-title="title text here" shape="rect" coords="45,398,304,577" style="outline:none;" target="_self" /> <area alt="" title="shipping materials" href="#"class="tooltip-bot" data-original-title="title text here" shape="rect" coords="9,52,141,183" style="outline:none;" target="_self" /> <area alt="" title="sawdust" href="#"class="tooltip-bot" data-original-title="title text here" shape="rect" coords="302,311,410,385" style="outline:none;" target="_self" /> <area alt="" title="electricity" href="#"class="tooltip-bot" data-original-title="title text here" shape="rect" coords="430,0,570,113" style="outline:none;" target="_self" /> <area alt="manufacturing" title="manufacturing" href="#"class="tooltip-bot" data-original-title="title text here" shape="poly" coords="348,193,213,197,188,313,221,368,296,362,300,310,357,302,363,193" style="outline:none;" target="_self" /> </map>
i'm no expert feel because area elements have no actual heights or widths. boundaries established using coords attribute not looked @ bootstrap.
there may better way this, simple fix add below code page.this position tooltip fixed distance pointer itself.
here working jsfiddle
$(document).mousemove( function(e) { var mousex = e.pagex - $('#image-maps-com-process-map').offset().left - 40; var mousey = e.pagey - $('#image-maps-com-process-map').offset().top + 20; $('.tooltip').css({'top':mousey,'left':mousex}).fadein('slow'); }); 
Comments
Post a Comment