S2370316 - Conjoint card

by dixalex

HTML

<script src="https://researchresults.opinioninsight.com/panel/files/24/corner.js"></script>
<table class='conjoint_choice_card'>
    <tbody>
        <tr>
            <td class='first_column'>
                <ul>
                    <li class='list_header'>Example of screen</li>
                    <li>Your ability to withdraw your investment</li>
                    <li>How often you contact a financial advisor</li>
                    <li>Design of funds in your portfolio</li>
                    <li>Whether the full portfolio is customized for you</li>
                    <li>Where you buy</li>
                    <li>Tools to guide your retirement planning</li>
                    <li>Who you buy from</li>
                    <li>% account value you pay in annual fees</li>
                </ul>
            </td>
            <td>
                <ul>
                    <li class='list_header'>Offer A</li>
                    <li><a href='#' class='mouseover' title='{#pipe_tool_tip_text_here}'>Withdraw from investments &amp; annuity</a></li>
                    <li><a href='#' class='mouseover' title='{#pipe_tool_tip_text_here}'>Unlimited advisor support</a></li>
                    <li><a href='#' class='mouseover' title='{#pipe_tool_tip_text_here}'>Active funds</a></li>
                    <li><a href='#' class='mouseover' title='{#pipe_tool_tip_text_here}'>Customized for you</a></li>
                    <li><a href='#' class='mouseover' title='{#pipe_tool_tip_text_here}'>Buy from advisor</a></li>
                    <li><a href='#' class='mouseover' title='{#pipe_tool_tip_text_here}'>No self-help tools</a></li>
                    <li class='bottom_black'>Insurance company, e.g. Prudential</li>
                    <li class='bottom_red'>1.2% <span class='per_year_color'>per year</span></li>
                </ul>
            </td>
            <td>
                <ul>
                    <li class='list_header'>Offer B</li>
                    <li><a...

CSS

.conjoint_choice_card {
    background-color: #FFF;
    border-collapse: collapse;
    font-size: .83em;
    font-family: arial;
}

.conjoint_choice_card li.list_header,
.conjoint_choice_card .first_column li.list_header {
    font-weight: bold;
    list-style-type: none;
    padding: none;
    margin: none;
    text-align: center;
    margin-top: .9em;
    color: #000;
}

.conjoint_choice_card li {
    height: 4.15em;
    margin-bottom: .3em;
    color: #2b9cff;
}

.conjoint_choice_card li a {
    color: #2b9cff;
}

.conjoint_choice_card .first_column li {
    list-style-type: none;
    text-align: right;
    margin-right: .55em;
    color: #000;
}

.conjoint_choice_card .last_column li {
    list-style-type: none;
    text-align: center;
    color: #000;
}

.conjoint_choice_card .last_column li.list_header.exclusive {
    margin-top: 0;
}

.conjoint_choice_card td {
    background-color: #FFF;
    padding: .25em;
    margin-top: .90em;
}

.conjoint_choice_card td ul {
    background-color: #FFF;
    border: solid 2px #29407a;
    width: 190px;
    padding: 0;
    padding-left: 1.65em;
    margin: 0 auto;
    height: 575px;
}

.conjoint_choice_card td.first_column ul {
    padding-left: .25em;
    border: solid 2px #FFF;
}

.conjoint_choice_card td.last_column ul {
    padding-left: .15em;
}

.conjoint_choice_card td.conjoint_question_text {
    text-align: center;
}

.per_year_color {
    color: #000;
    ;
}

.conjoint_choice_card li.bottom_black {
    color: #000;
}

.conjoint_choice_card li.bottom_red {
    color: red;
}

.ui-tooltip {
    padding: .5em;
    color: #000;
    border-radius: .5em;
    font: .83em "Helvetica Neue", Sans-Serif;
    text-align: center;
    width: auto;
    min-width: 350px;
    border: solid 1px #e1f1ff;
}

.ui-tooltip-content img {
    width: 100%;
    height: auto;
}

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #e1f1ff/*{bgColorContent}*/
    url('')/*{bgImgUrlContent}*/
    50%/*{bgContentXPos}*/
   ...

JavaScript

jQuery('.conjoint_choice_card ul').not(jQuery('.conjoint_choice_card td.first_column ul')).corner('50px');

jQuery('.mouseover').tooltip({
    items: "[title]",
    content: function() {
        var element = jQuery(this);
        if (element.is("[title]")) {
            return element.attr("title");
        }
    }
}).on('click', function(e) {
    e.preventDefault();
});