How to calculate offsetWidth and scrollWidth for o

I have a select input which has multiple attribute. I have given fixed width to the element. Because of fixed width the overflowing content along x-direction is not visible. So I have written a small JavaScript function to set the tooltip using title attribute for the option tags whose offsetWidth is greater than its scrollWidth. This is working very fine in chrome, but in IE 11 the offsetWidth and scrollWidth is always zero. Kindly let me know whether there is another way of calculating the offsetWidth and scrollWidth.

<!DOCTYPE html>
<html>
   <style type="text/css">
      .selectField {
         width: 100px !important;
      }
   </style>
   <script type="text/javascript">
      function updateTooltip() {
        var element = document.getElementById('selectField');
        for (var i = 0; i < element.length; i++) {
          if (element.options[i].offsetWidth < element.options[i].scrollWidth) {
            element.options[i].title = element.options[i].label;
          }
        }
      }
   </script>
   <body>
      <select multiple class="selectField" id="selectField">
         <option>One Two Three Four Five Six</option>
         <option>One</option>
         <option>Two </option>
         <option>Three</option>
         <option>Four</option>
         <option>Five</option>
         <option>Six</option>
         <option>One Two Three Four Five Six</option>
         <option>One</option>
         <option>Two </option>
         <option>Three</option>
         <option>Four</option>
         <option>Five</option>
         <option>Six</option>
         <option>One Two Three Four Five Six</option>
         <option>One</option>
         <option>Two </option>
         <option>Three</option>
         <option>Four</option>
         <option>Five</option>
         <option>Six</option>
      </select>
      <button onClick="updateTooltip()">Apply Tooltip</button>
   </body>
</html>

Please find the working copy in the below mentioned plunker https://plnkr.co/edit/b9cFuUDXSt4wgcxql3ga?p=preview

You can include jQuery in your project and update the UpdateTooltip method to the following. I understood about the creation of dynamic div elements from this post.

function updateTooltip() {
    var element = document.getElementById('selectField');

    for (var i = 0; i < element.length; i++) {
        //Create dynamic div with innertext set to option lable 
        var dynamicDiv = $(document.createElement("div")).text(element.options[i].label).css({
            position: "absolute", left: -9999}).appendTo("body");

        var width = dynamicDiv.width(); //Get width of the div

        if(width + 10 > element.offsetWidth) //Check the width of the div against select element width
            element.options[i].title = element.options[i].label;

        dynamicDiv.css({position: "static",left: "auto"}).detach(); //Remove dynamic div from DOM
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        .selectField {
            width: 100px !important;
        }
    </style>

<select multiple class="selectField" id="selectField">
    <option>One Two Three Four Five Six</option>
    <option>One</option>
    <option>Two </option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>One Two Three Four Five Six</option>
    <option>One</option>
    <option>Two </option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>One Two Three Four Five Six</option>
    <option>One</option>
    <option>Two </option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
</select>
<button onClick="updateTooltip()">Apply Tooltip</button>