jquery选择工具提示尚不可见

Question

在我的网站上，我有一个页面的部分，其中包含可以悬停的元素以显示工具提示：

我有一个放大和缩小功能，我调整包含这些元素的div的css zoom属性。放大和缩小也会调整工具提示字体的大小，但我想保持工具提示字体大小不变，无论缩放大小如何。

我想我可以通过在用户放大时调整字体大小来实现此目的：

   $(document).ready(function(){
       $('.zoomOutIcon').click(function(){
          var currentZoom = parseFloat($('.jOrgChart').css('zoom'));
          $('.jOrgChart').css('zoom', currentZoom - 0.25); 
          var current_label_font_size = parseFloat($('.tooltip').attr('font-size'));
          $('.tooltip').attr('font-size', current_label_font_size*1.25);
         }
    });

但是，它无法找到带有$（'。tooltip'）的工具提示元素，因为它们尚未加载到页面上，直到用户将鼠标悬停在元素上。如何设置页面上尚未加载的元素的css属性？

Answer 1

试试这个

 $(document).ready(function(){
    $('.zoomOutIcon').click(function(){
          var current_label_font_size = parseFloat($('.tooltip').attr('font-size'));
          $('.tooltip').attr('font-size', current_label_font_size*1.25);
      });
 })

Answer 2

要解决此问题，每次用户放大或缩小div时都会销毁工具提示并重新创建指定“模板”选项的工具提示，我可以使用该工具提示来传递指定所需字体大小的类：

<强>的javascript：

  function setFontSize(){
     var currentZoom = $('.jOrgChart').css('zoom');
     if(currentZoom == 0.75){

      $('.stepNode').tooltip('destroy');

      $('.stepNode').slice(1, $('.stepNode').length-1).tooltip({
        template: '<div class="tooltip smaller"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
      });
    });
   }

  $('.zoomInIcon').click(function(){
    $('.jOrgChart').css('zoom', currentZoom + 0.25);
    setFontSize();
  }

<强> CSS

.tooltip.smaller{
  font-size: 14px;
}