带有左侧导航的整页网站

Question

我正在做一个完整的页面网站，左侧有一个导航，当我悬停其中一个项目时，会显示一个工具提示。但我想知道悬停时如何将工具提示“粘贴”到图标上。请参考我的截图。

app.Tooltips = [];
app.Anchors = [];
app.initFunc = function() {

    var e = this;
    $("section").each(function() {
      var i = $(this),
        a = i.data("navigation");
      if (a) {
        var t = a.split("|");
        e.Anchors.push(t[0]);
        e.Tooltips.push(t[1]);
        i.hasClass("section-versus") && (e.sectionWithViews = t[0])
      }
    });
    $(".toReveal > *").addClass("reveal")
  },

  $("#main").fullpage({
    verticalCentered: !1,
    resize: !1,
    navigationPosition: "right",
    navigationTooltips: app.Tooltips,
    anchors: app.Anchors,
    easing: "swing",
    autoScrolling: !0,
    scrollingSpeed: app.fpScrollingSpeed,
    normalScrollElements: ".scrollable",
    css3: !0,
    sectionSelector: "section",
  }),

.fp-tooltip {
  position: absolute;
  top: 0;
  color: #009fdf;
  font-size: 12px;
  white-space: nowrap;
  background: #ffffff;
  padding: 2px 10px;
  margin: 0;
}
.fp-tooltip.right {
  right: 34px;
}
.fp-tooltip {
  text-transform: uppercase;
}

<div id="main" role="main" class="page-content clearfix">
  <!--section1-->
  <section class="section-home section-sprites dark" data-body-classes="section-header-white section-pagination-white" data-navigation="topsection|Topsection">
    <div class="container">

    </div>

    <div class="imagefill imagefull background">
      <img width="100%" height="100%" src="screen1.png" />
    </div>

    <!--icon scroll-->
    <a style="z-index: 3" data-bottom="opacity: 1;" data-top="opacity: 0;" class="arrow-nav" href="#feature-details">
      <span class="fa fa-chevron-down arrow-1"></span>
      <span class="fa fa-chevron-down arrow-2"></span>
    </a>

    <!--<span class="scroll-to-start align-horizontal icon-down"></span>   
        end icon scroll-->
  </section>

  <!--section2-->
  <section class="section-introduction light clearall" data-body-classes="section-header-black section-pagination-black" data-navigation="promise|Promise">
    <div class="view view-black view-top haft-height-top">
      <div class="container">
        <div class="product-animation">
          <ul>
            <li class="product-animation-left">
              <img src="promise6.png" />
            </li>
            <li class="product-animation-center">
              <img src="promise4.png" />
            </li>
            <li class="product-animation-right">
              <img src="promise5.png" />
            </li>
          </ul>
        </div>
        <div class="intro-promise">
          <span>test</span> 
        </div>
      </div>
    </div>

    <div class="view view-white view-bottom haft-height-bottom">
      <div class="inner">
        <div class="row-promise-bottom clear-fix">
          <ul>
            <li>
              <span>
                <img src="promise1.png" />
              </span>
            </li>
            <li>
              <span>
                <img src="promise1.png" />
              </span>
            </li>
            <li>
              <span>
                <img src="promise1.png" />
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <!--end section2-->

  <!--section3-->
  <section class="section-handheld clearall" data-body-classes="section-header-white section-pagination-black" data-navigation="handheld|Handheld">
    <div class="inner">
      <div class="twentytwenty-container">

        <img src="handheld1.png" />

        <img src="handheld2.png" />
      </div>
    </div>
  </section>
  <!--end section3-->

  <!--section Contact-->
  <section class="section-more section-footer clearall" data-body-classes="section-header-white section-pagination-white" data-navigation="contact|Contact">

    <div class="inner">

    </div>

  </section>
  <!--end section Contact-->


</div>

Answer 1

不确定您真正要的是什么，但如果您使用以下代码编辑 CSS 文件，它可能会让您接近。

.section-pagination-white .fp-tooltip {
    color: #f7f7f7;
    background: #ffffff;
    padding: 0 15px;
    color: #000000;
}
.fp-tooltip.right {
    right: 5px;
}

希望我能以某种方式帮助你。