How can I get a css tooltip to display properly after javascript substitutes in a new image/title?

Question

$('#pic-changer').change(function() { //if the select value gets changed
  var imageSource = $(this).find(':selected').data('picture'); //get the image source from data-picture
  var tempSource = $(this).find(':selected').data('tempname');
  // insert new html into div image-location
  $('#image-location').html('<a title="This is our ' + tempSource + ' image." class="masterTooltip"><img src="' + imageSource + '" style="height:400px;border:2px solid gray;"></a>');
})

$(document).ready(function() {
  // Tooltip only Text
  $('.masterTooltip').hover(function() {
    // Hover over code
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>')
      .text(title)
      .appendTo('body')
      .fadeIn('slow');
  }, function() {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
  }).mousemove(function(e) {
    var mousex = e.pageX + 25; //Get X coordinates
    var mousey = e.pageY - 5; //Get Y coordinates
    $('.tooltip')
      .css({
        top: mousey,
        left: mousex
      })
  });
});

body {
  font-size: 18px;
  font-family: 'Righteous', 'comic sans MS', cursive;
  color: #ffff4d;
  cursor: default;
  margin-top: 25px;
  background-color: #000000;
  letter-spacing: .5px;
}
A:hover {
  text-decoration: none;
  color: white;
}
A {
  text-decoration: underline;
  color: #aa44aa;
}
INPUT {
  background-color: turquoise;
  color: black;
  font-family: 'Righteous', 'comic sans MS', cursive;
  font-weight: normal;
  font-size: 17px;
  margin-left: 2px;
}
INPUT:HOVER {
  background-color: #b3e6ff;
  cursor: text;
}
SELECT {
  background-color: turquoise;
  color: black;
  font-family: 'Righteous', 'comic sans MS', cursive;
  font-weight: normal;
  font-size: 18px;
  margin-left: 2px;
}
SELECT:HOVER {
  background-color: #b3e6ff;
}
.FORMBUTTON {
  border-color: #eee;
  background-color: #009933;
  color: #eee;
  font-family: 'Righteous', 'comic sans MS', cursive;
  font-weight: normal;
  font-size: 19px;
}
.FORMBUTTON:HOVER {
  border-color: #666;
  background-color: #00ff66;
  color: #111;
  cursor: pointer;
}
.hiders {
  font-size: 16px;
  cursor: pointer;
  color: royalblue;
  width: 770px;
  text-align: center;
  display: block;
}
.hiders:hover {
  font-size: 16px;
  cursor: pointer;
  color: darkturquoise;
  background-color: #111;
}
.hiders a {
  font-size: 11px;
  color: blueviolet;
  text-decoration: underline;
}
.hiders a:hover {
  font-size: 11px;
  color: orchid;
  text-decoration: none;
}
.footer {
  font-size: 12px;
  color: aqua;
}
.footer a {
  color: dimgray;
  text-decoration: none;
}
.footer a:hover {
  color: white;
  text-decoration: underline;
}
/* THIS CONTROLS THE LOOK OF THE HOVERING HELP TOOLTIP BOXES */

.tooltip {
  display: block;
  position: absolute;
  border: 1px solid #444;
  background-color: #161616;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  font-size: 16px;
  font-family: 'Righteous', 'comic sans MS', cursive;
  white-space: pre-line;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="content1" style="display:block;padding-top:2px;width:770px;">

  <form>

    <div id="image-location" style="margin:3x 0px 4px 0px;">
      <a title="This is our starting image." class="masterTooltip" target="_sitesamples">
        <img src="http://i.imgur.com/hM2pLfF.jpg" style="height:400px;border:2px solid gray;">
      </a>
    </div>
    <br />

    <select name="template" class="masterTooltip" title="Select a new image here." id="pic-changer">

      <option value="1" data-picture="http://i.imgur.com/hM2pLfF.jpg" data-tempname="DEFAULT STARTING" selected>Default</option>
      <option value="17" data-picture="http://i.imgur.com/zt6E9xb.jpg" data-tempname="CHOICE 1">Choice 1</option>

      <option value="12" data-picture="http://i.imgur.com/gwsB1rg.jpg" data-tempname="CHOICE 2">Choice 2</option>

      <option value="16" data-picture="http://i.imgur.com/q4ULfOL.jpg" data-tempname="CHOICE 3">Choice 3</option>

    </select>
    <br />
  </form>

</div>

I have a simple function that changes the HTML via javascript to show a new image everytime a new item is selected from the dropdown select box. A new title attribute is also given at that time. At the same time, this page also has a masterTooltip class that is created in javascript to show nicer and faster tooltips on hover. Everything works as it should until a new selection is made via the dropdown. After the new image is selected, the tooltip does get updated, but fails to adopt the masterTooltip class that the original had.

See the fiddle example here... https://jsfiddle.net/sqkm2s83/13/

I am not a professional designer by any means. The HTML and CSS are fairly simple, but javascript gets me lost at times. This particular script was copied and adapted for my needs. I did not write it and do not fully understand how it works.

This script applies the tooltip, but stops working after the pic-changer script does it's thing. How can I get it to run again after I swap images? It seems to only run once at page load.

$('#pic-changer').change(function() { //if the select value gets changed
    var imageSource = $(this).find(':selected').data('picture'); //get the image source from data-picture
    var tempSource = $(this).find(':selected').data('tempname');
    // insert new html into div image-location
    $('#image-location').html('<a title="This is our ' + tempSource + ' image." class="masterTooltip"><img src="' + imageSource + '" style="height:400px;border:2px solid gray;"></a>');
})

$(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 25; //Get X coordinates
        var mousey = e.pageY - 5; //Get Y coordinates
        $('.tooltip')
            .css({
                top: mousey,
                left: mousex
            })
    });
});

Answer 1

This is code js same for you: https://jsfiddle.net/sqkm2s83/17/ when you change image, you nead binding again event hover for class "masterTooltip". Because event hover you wirte it work At a time page load.

$('#pic-changer').change(function() { //if the select value gets changed
    var imageSource = $(this).find(':selected').data('picture'); //get the image source from data-picture
    var tempSource = $(this).find(':selected').data('tempname');
    // insert new html into div image-location
    $('#image-location').html('<a title="This is our ' + tempSource + ' image." class="masterTooltip"><img src="' + imageSource + '" style="height:400px;border:2px solid gray;"></a>');
    $('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        if (title == undefined) return;
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 25; //Get X coordinates
        var mousey = e.pageY - 5; //Get Y coordinates
        $('.tooltip')
            .css({
                top: mousey,
                left: mousex
            })
    });
})

$(document).ready(function() {
    // Tooltip only Text
    $('.masterTooltip').hover(function() {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousex = e.pageX + 25; //Get X coordinates
        var mousey = e.pageY - 5; //Get Y coordinates
        $('.tooltip')
            .css({
                top: mousey,
                left: mousex
            })
    });
});

Answer 2

Since the elements are created dynamically you should use on function.

Instead of

$('#pic-changer').change(function() {

use

$('body').on('#pic-changer','change',function() {