JSFiddle - React, Tailwind, and code Playground

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="right" title="test" id="id_icon_id_cover_letter_details_second_paragraph" /></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

$(function () {
    $('#id_icon_id_cover_letter_details_second_paragraph').tooltip();
    $('#id_cover_letter_type').change(changeDisplayFunction);
    
    function changeDisplayFunction() {
        
    	if ($('#id_cover_letter_type').val() == '0') {
            $('#id_icon_id_cover_letter_details_second_paragraph')
                .data('bs.tooltip')
                .options.placement = 'right';
    	} else {
            $('#id_icon_id_cover_letter_details_second_paragraph')
                .data('bs.tooltip')
                .options.placement = 'bottom';
        }
	}
});