The JavaScript Tooltip is well-suited for display of images or images with text.
JavaScript ( on top ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <script src="dw_tooltip_c.js" type="text/javascript"></script> <script type="text/javascript"> /* 2 functions that can be used to vary tooltip width according to image width: dw_Tooltip.wrapImageToWidth and dw_Tooltip.wrapToWidth See www.dyn-web.com/code/tooltips/documentation2.php#wrapFn for info */ dw_Tooltip.defaultProps = { //supportTouch: true, // set false by default wrapFn: dw_Tooltip.wrapImageToWidth } // Problems, errors? See http://www.dyn-web.com/tutorials/obj_lit.php#syntax dw_Tooltip.content_vars = { L1: { img: 'images/dw-btn.gif', w: 80, // width of image h: 24 // height of image }, L2: { img: 'images/dot-com-btn.gif', w: 176, h: 30 }, heading: { img: 'images/tooltip/our-lawyer-heading.jpg', w: 500, h: 330 } } </script> |
HTML:
1 | <a href="#" class="showTip heading">Link 3</a> |
Sourece: http://www.dyn-web.com/code/tooltips/image_text.php