JSFiddle - React, Tailwind, and code Playground

by 6233114

HTML

<script src="https://jsfiddle.net/DTcHh/"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<select id="id_cover_letter_type" name="cover_letter_type">
    <option value="0" selected="selected">I will write my own data</option>
    <option value="1">Standard Cover Letter</option>
</select>
<br />
<br />
<br />
<a href='http://postimage.org/' target='_blank'><img src='http://s30.postimg.org/mrj9aezrx/weyland_yutani_poster_419x600.jpg' border='0' alt="weyland yutani poster 419x600" rel="tooltip" html="true" data-placement="bottom" title="test" /></a>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}

JavaScript

$('#id_cover_letter_type').change(changeDisplayFunction);

function changeDisplayFunction() {

    if ($('#id_cover_letter_type').val() == '0') {

        alert('left/right');

        // the following code did not work.
        $('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'left';

        // the following code did not work.
        //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'left' });

        // the following, destroying, appling the placement and then showing the tooltip did not work.
        //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
        //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'left'});
        //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');

        // applying the placement and the showing the tooltip did not work.
        //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'left'}).tooltip('show');

    } else {

        // display the text areas as 50% width with the suggestion container next to it.
        alert('below');

        //$('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'bottom';

        //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
        //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'bottom'});
        //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');

        //$('#id_icon_id_cover_letter_details_second_paragraph').data('tooltip').options.placement = 'bottom';
        //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');

        //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'bottom'}).tooltip('show');

        //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'bottom' });


    }

}