javascript - 在整页js中创建带箭头的工具提示

Question

$(document).ready(function(){
  
  // variables
  var $header_top = $('.header-top');
  var $nav = $('nav');



  // toggle menu 
  $header_top.find('a').on('click', function() {
    $(this).parent().toggleClass('open-menu');
  });



  // fullpage customization
  $('#fullpage').fullpage({
    autoScrolling:false,
    sectionsColor: ['#B8AE9C', '#FFF', '#FFF', '#064179', '<div id="FFFFFF"></div>','#FFFFFF'],
    sectionSelector: '.vertical-scrolling',
    slideSelector: '.horizontal-scrolling',
    navigation: true,
    slidesNavigation: true,
    css3: true,
    controlArrows: false,
    anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection','sixthsection'],
    menu: '#menu',
    navigationPosition: 'right',
    navigationTooltips: ['Home', 'Building Blocks', 'Achievement', 'Feedback', 'Contact','sixth'],
    showActiveTooltip: false,

    afterLoad: function(anchorLink, index) {
      $header_top.css('background', 'rgba(0, 47, 77, .3)');
      $nav.css('background', 'rgba(0, 47, 77, .25)');
      if (index == 5) {
          $('#fp-nav').show();
        }
    },

    onLeave: function(index, nextIndex, direction) {
      if(index == 5) {
        $('#fp-nav').show();
      }
    },

    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
      if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(false, 'up');
        $header_top.css('background', 'transparent');
        $nav.css('background', 'transparent');
        $(this).css('background', '#374140');
        $(this).find('h2').css('color', 'white');
        $(this).find('h3').css('color', 'white');
        $(this).find('p').css(
          {
            'color': '#DC3522',
            'opacity': 1,
            'transform': 'translateY(0)'
          }
        );
      }
    },

    onSlideLeave: function( anchorLink, index, slideIndex, direction) {
      if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(true, 'up');
        $header_top.css('background', 'rgba(0, 47, 77, .3)');
        $nav.css('background', 'rgba(0, 47, 77, .25)');
      }
    } 
  }); 
});

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -8px;
    color: #ef4f50;
    font-size: 18px;
    font-family: 'Roboto Slab', serif;   
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;

}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in;
    width: auto;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.right {
    right: 30px;
}
#fp-nav ul li .fp-tooltip.left {
    left: 20px;
}

你好，我正在使用 fullpage.js 来设计我的网站。我正在使用 fullpage.js 的内置工具提示功能。我想用箭头指示显示我的工具提示。我写了很多 css 它不会影响我如何在 fullpage.js 中实现工具提示

Answer 1

尝试更改行:

showActiveTooltip: false,

到:

showActiveTooltip: true,