how to display the images as tooltip

hi,

in my DCT i need to display the images as a tooltip. is it possible then please help me to do this. thanks

Find more posts tagged with

Comments

I'm not sure what you mean by "displaying the images as a tooltip" - If you mean providing a thumbnail of the selected image inline within the DCT form - there is a FormAPI setting for that, which is documented in the FormAPI manual - IWDatacapture.enableImagePreview() - read the FormAPI manual for more information.

Karthikb

hi,

thanks for your replay. my requirement is i have a container when i am click on th add it ask me the option like image & text, Text & table and Text only. when i mouse over the images i need show the thumb image as tooltip as like my sample attached here.

Karthik

Adam Stoller

That doesn't make any sense - if you're creating a new instance of an OR container, it won't have any image selected yet, so there's nothing to provide a thumbnail of.
I do not believe that there is any [easy] way to augment the handling of the OOTB menus for OR containers to do what you are suggesting
When you use the file browser element for images, assuming you have the extns attribute set correctly, you should see thumbnails of the image selected in the browser interface.
When you setup the FormAPI directive that I previously mentioned, you should see a thumbnail of the image referenced by the path in the form field, directly within the DCT form.

Karthikb

Thanks ghoti,

I accept your concept. But in my scenario is bit different. We are going to use 3 different thumb images for the three options. These images are static it never be change. Please advise any option or way.

praveen t n

You can use jQuery to display your images as and when required. I'm giving you a sample here.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.techinfo').hide();
    $('.main-container').hover(function(){
        $('.techinfo').fadeIn(500)
    })
});
</script>
</head>

<body>
<div class="main-container">
    hover here....
</div>

<div class="techinfo">Here's the image <br/>
<img class="hover" src="http://www.w3schools.com/images/lamp.jpg" />
</div>

</body>
</html>

I leave it upto you to customize as per your requirement.

regards,

Praveen