Question

我正在尝试制作纯粹的CSS工具提示并进行了一些研究，但无法找到我正在寻找的内容，如果我努力将某些人混淆的代码转移到我自己的内容中。我不介意如果需要jquery来获得我的结果，但如果可能的话我宁愿避免它！我想知道如何设计工具提示以匹配我的方案。这是我自己的代码的一个元素，我想要一个工具提示。我需要的工具提示元素是div id`selectStateAlabama。下面还有一个jsfiddle演示。

HTML

<body>
<div class="container">
<?php include ("_includes/sidemenu.php");?>
<div id="contentContainer">
    <div id="chooseStateRowOne">
        <div id="chooseStateAlabama"><p>AL</p></div>
    </div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="_javaScript/sidemenu.js"></script>
</body>

CSS

body {
    height: 100%;
    width:100%;
    overflow:hidden;
}
.container{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-9999;
}
#contentContainer {
    width: 100%;
    height: 100%;
    background:#ffffff;
    top: 5%;
    position: absolute;
    float:left;
    bottom: 30px;
    z-index: -9999;
    background-size:100% 100%;
    overflow:hidden;
}
p {
    margin:auto;
}
p:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
#chooseStateRowOne {
    width: 98%;
    height:16.6%;
    left: 0;
    top:2%;
    position: absolute;
    margin-left: 1%;
    margin-right: 1%;
}
#chooseStateAlabama {
    width: 9.1%;
    height: 100%;
    top: 0;
    left: 0;
    background:#383d3f;
    position: absolute;
    background-size:100% 100%;
    display: flex;
    color: #ffffff;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 2.5VW;
    text-align: center;
    vertical-align: middle;
}
#chooseStateAlabama:hover {
    background: #fbc500;
    cursor:pointer;
}

样本

JSFIDDLE

Answer 1

像这样编辑你的代码......

HTML是:::

<body>
  <div class="container">
    <?php include ("_includes/sidemenu.php");?>
    <div id="contentContainer">
      <div id="chooseStateRowOne">
        <div id="chooseStateAlabama" class="tooltip"><p>AL</p>      
          <span>ToolTip</span>
        </div>
      </div>
    </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="_javaScript/sidemenu.js"></script>
</body>

在CSS中你需要添加这两件事......

div.tooltip span {
    display:none; padding:14px 20px;
    margin-top:1px; margin-left:5px;
    line-height:16px;
}
div.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;
}

＆安培;如果你想尝试jQuery，请查看此链接。

http://jqueryui.com/tooltip/

Answer 2

如果您查看this modification to your fiddle，您会看到我添加了一个子元素，然后将其定位为绝对没有设置顶部/左侧（那么，几乎像position:relative;，但不包含在其父母中）。然后我为父对象添加了一个:hover选择器，使用了transition CSS属性，你得到了一个工具提示。

添加的CSS是

#chooseStateRowOne>div>.help {
    position: absolute;
    border-radius: 4px;
    width: 0px;
    background: #fff;
    overflow: hidden;
    -webkit-transition: width 0.5s ease-out;
    -ms-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}
#chooseStateRowOne>div>.help>div {
    width: 512px;
    font-size: 14px;
    line-height: 1.4em;
    color:#000;
    text-align:left;
}
#chooseStateRowOne:hover>div>.help {
    padding:.5em;
    border-radius:4px;
    box-shadow:0px 0px 2px #999;
    width:512px;
}

添加的HTML就在这一行：

<div id="chooseStateAlabama"><p>AL</p><div class="help"><div>Alabama</div></div></div>

这应该让你走在自己的道路上。

Answer 3

尝试这个，我做到了：

<link href="https://firebasestorage.googleapis.com/v0/b/tooltipcss.appspot.com/o/tooltip.css?alt=media&token=0ce443aa-0970-4167-8d7d-7abdcd2edf71" rel="stylesheet">
<span class="info">Text<span class="tooltip">MSG</span></span>

如何制作纯CSS工具提示？

3 个答案: