Images or Images and Text in Tooltips

Admin

9 years ago

The JavaScript Tooltip is well-suited for display of images or images with text.

JavaScript ( on top ):

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

/* 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:

<a href="#" class="showTip heading">Link 3</a>

1	<a href="#" class="showTip heading">Link 3</a>

Download Js

Sourece: http://www.dyn-web.com/code/tooltips/image_text.php