Picture display in tool tip

Question

We want to display a picture when the users moves the mouse over an attribute in MaxDiff. What is the best way yo achieve this?

Answer 1

Hi

I generally use tool tip to show mouse over option for  any conjoint option. This is the technique to use this.

Put this line in Survey setting -> HTML head tag

<script src="[%GraphicsPath()%]tool_tips.js" type="text/javascript"></script>

This CSS on the same location ( survey setting-> HTML head )

<style type="text/css">

.tips
{
    font-weight: bold;    
}

.tip_text
{
    font-size: 12px;
    width: 240px;
    height: 160px;
    border: 1px solid #7F7F7F;
    background-color: #F3EFD5;
    padding: 4px;
    position: absolute;
    z-index: 1000;
    display: none;
}

</style>
    

use this code in each max-diff footer

<script language="javascript">
<!--

SetupToolTip(11, "tip");

//-->
</script>

And now last either download tool_tip.js from site or put this code to notepad and save as tool_tips.js

function SetupToolTip(intNumTips, strName)
{
  var i = 0;

  for (i = 1; i <= intNumTips; i++)
  {
    var strTipName = strName + "_" + i;
    
    var ElementArray = $$("." + strTipName);
    var Element = 0;

    for (j = 0; j < ElementArray.length; j++)
    {
        Element = ElementArray[j];

        Element.name = strTipName;

        Element.addEvent('mouseover', function(){

        $(this.name + "_text").setStyles({'display': 'block'});
        this.setStyles({'text-decoration': 'underline'});

        });

        Element.addEvent('mousemove', function(event){

            var x = event.page.x; 
            var y = event.page.y; 

            $(this.name + "_text").setStyles({'left': x + 10, 'top': y + 10, 'display': 'block'});
        });

        Element.addEvent('mouseout', function(){
            
            this.setStyles({'cursor': 'normal', 'text-decoration': 'none'});

            $(this.name + "_text").setStyles({'display': 'none'});

        });
    }

    
    
    
  }
}

   
also use this code for each option in max-diff

<span class="tip_1 tips">

use tip_2 tips to tip_n tips for all options. Hope this helps to you.

Answer 2

If you are on version 7 or earlier, we have a tutorial on adding tool tips at https://www.sawtoothsoftware.com/download/ssiweb/tool_tips/.

If you are on version 8, tool tips are built in via an SSI Script function.  See www.sawtoothsoftware.com/support/issues/ssiweb/online_help/hid_web_additionaldetails.htm about 3/4 of the way down the page is the section on the Tool Tips function.