将 HTML 元素放置在所有元素的顶部

Question

我正在尝试使用 CSS 开发一个工具提示，以与 Select2 一起使用。我使用 position:absolute; 和 z-index: 99999; 作为工具提示。但工具提示并未出现在所有 HTML 元素之上。

$(document).ready(function() {
  $('.js-data-example-ajax').select2({
    placeholder: "select...",
    templateSelection: function(state) {
      if (!state.id) {
        return state.text;
      }      
      return $(`<span>${state.text}</span>`);
    },
    templateResult: function(state) {
      if (!state.id) {
        return state.text;
      }      
      return $("<span class='tooltip'>" +
            state.text +
            "<span class='tooltiptext'>" +
            state.value +
            "</span></span>");
    },
    ajax: {
      url: 'https://api.github.com/gists/public',
      dataType: 'json',
      processResults: function(data) {        
        var options = [];
          if (data) {
              $.each(data, function (index, text) {
                  options.push({
                    id: index,
                    text: text.owner.login,
                    value: text.commits_url,
                  });
              });
          }
          return {
              results: options,
              more: false,
          };
      },
      data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    }
  });
});

.js-data-example-ajax {
  width: 200px;
}

.top{
  color:red;
  border: 2px solid red;
  width: fit-content;
  z-index:100000;
}


.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 620px;
  background-color: #000000;
  color: #ffffff;
  border-radius: 6px;
  position: absolute;
  z-index: 99999;
  bottom: 125%;
  left: -30%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>



<select class="js-data-example-ajax" id="mySelect2" multiple>
</select>

这就是问题所在。

您能帮我在所有 HTML 元素上方显示工具提示吗？