Question

我正在尝试更改移动视图上工具提示的位置，以便向上查看，而不是向左和向右查看，因为它们当前位于更大的屏幕上。工具提示当前显示在左边的按钮上，右边的按钮显示在右边的按钮，因为他们在这些区域有空白，但在移动视图上他们没有，我想改变“数据放置”使用CSS“至”顶部“但仅在使用手机查看时（少于400）。我目前的CSS列在下面，列出了我列出的情况。

HTML：

#button-container {
  height: 100px;
  margin-top: 15%;
  #Mission {
    width: 45%;
    a {
      h5 {
        font-size: 18px;
      }
    }
  }
  #HowItWorks {
    width: 45%;
    a {
      h5 {
        font-size: 18px;
      }
    }
  }
}

<div id="button-container" class="container">
  <!-- Container -->
  <div class="row">
    <div class="col-lg-3"></div>
    <!-- Spacing -->

    <div id="Mission" class="btn col-lg-3" data-toggle="tooltip" data-placement="left" title="
            We believe that in order to achieve continuous joy one needs to unselfishly create joy for those around them. The Joy Project assists local members of the community through acts of kindness.">
      <!-- Mission button -->
      <!-- Tooltip Hover -->
      <a href="/mission">
        <h5><b>Our Mission</b></h5>
      </a>
    </div>

    <div id="HowItWorks" class="btn col-lg-3" data-toggle="tooltip2" data-placement="right" title="
            Friends of the Joy Project “nominate” someone in need and then mobilize to meet this need and spread joy in our communities.">
      <!-- How It Works button -->
      <!-- Tooltip Hover -->
      <a href="/howitworks">
        <h5><b>How It Works</b></h5>
      </a>
    </div>

    <div class="col-lg-3"></div>
    <!-- Spacing -->
  </div>
</div>
<!-- /Container -->

Answer 1

如果您只希望展示位置在特定宽度上排名靠前，我建议您查看@media css rule。由于工具提示方向的声明方式（在div中），您可能必须创建两个div并根据高度确定要显示的div。

@media only screen and (max-width: 400px) {
        .tooltip .leftTooltip {
            display: none;
     }

        .tooltip .topTooltip {
                    display: visible;
                }
    }

@media only screen and (min-width: 400px) {
        .tooltip .leftTooltip {
            display: visible;
     }
            .tooltip .topTooltip {
                display: none;
            }
  }

Answer 2

转换数据展示=＆＃34;左＆＃34;进入数据放置=＆＃34;顶部＆＃34;

演示： https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h

使用CSS更改工具提示放置

2 个答案: