Question

我有一个工具提示，可以在鼠标悬停在图标上时显示我的搜索内容。这本身就很好。
我的问题是，这个图标位于inline-block导航内，并导致它作为我的工具提示的父级，它必须有大的width它会弄乱我的布局。
< br />因此，如果我没有用图标扩展我父母的宽度，那么由于它的父母width的{{1}} ~30px很小，因此工具提示会变得混乱。“ >

如果我将父母的宽度扩展到300px（工具提示的大小），则会影响我的布局。

我需要一种使用Icon从元素内部缓解工具提示本身的方法。

HTML结构：

<div id="search">
    <div class="wrapper">
        <div class="popper inline">
            <i class="fa fa-tags" />
            <div class="tooltip">
                <form>
                    <input placeholder="Search Tags" autocomplete="off" />
                    <button type="submit">
                        <a class="btn">
                            <i class="fa fa-search" />
                        </a>
                    </button>
                </form>
            </div>
        <div class="inline">
            <form>
                <input placeholder="Search Tags" autocomplete="off" autofocus="true" />
                <button type="submit">
                    <a class="btn">
                        <i class="fa fa-search" />
                    </a>
                </button>
            </form>
        </div>
    </div>
</div>

CSS（Scss）：

#search {
    background: $secondary;
    padding: .25rem;
    div.popper {
        background: transparent;
        border: none;
        font-size: .8rem;
        color: $highlight;
    }
    .inline form {
        button, input, a {
            background: transparent;
            border: none;
            font-size: .8rem;
            color: $highlight;
        }
        input[type="Search"] {
            width: 1368px;
            outline: none;
            font-style: italic;
            font-size: .7rem;
            padding: 1rem .5rem;
        }
        button {
            margin-left: 1rem;
        }
    }
}
.popper {
    position: relative;
    width: 300px;
}
.popper .tooltip {
  background: $secondary;
  bottom: 100%;
  color: $highlight;
  display: block;
  left: -25px;
  margin-bottom: 20px;
  opacity: 0;
  padding: .8rem;
  pointer-events: none;
  position: absolute;
  width: 300px;
  max-width: 90%;
  border-radius: 3px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 25px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.popper .tooltip:after {
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-top: solid $secondary 7px;
  bottom: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.popper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

感谢你的帮助！如果您需要更多信息，请发表评论。

CSS3工具提示：取决于Parent的宽度

0 个答案: