Question

我正在尝试设计一个表单，其中右侧显示始终的工具提示，以帮助用户填写表单。我所做的是我在Div中分配了每个部分，我想为每个部分提供一个工具提示。

<div title="This is where you fill your first name in.">
            <p> First Name: <input type="text" name="firstName"/> </p> 
            </div>
<div title="Last Name Entry">
            <p> Last Name: <input type="text" name="lastName"/> </p> 
            </div>
 <div title="OK!">
            <input type="submit" style="width: 10em; margin: auto 0"/>
            </div>

我发现这个整洁的网站可以帮助您轻松地在CSS中设置样式，并且我使用了通过它生成的代码：

a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #000000;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0; height: 0;
  border-right: 8px solid #000000;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  left: 100%;
  top: 50%;
  margin-top: -15px;
  margin-left: 15px;
  z-index: 999;
}

礼貌：

http://html-generator.weebly.com/

提前致谢！

Answer 1

好吧，我可以帮你解答标题问题。我总是使用CSS3伪元素和数据属性来完成，没有任何jQuery代码。

这是CSS3：


    [data-tip] {
     position:relative
    }
    [data-tip]:before {
        content: '';
        display: none;
        border: 5px solid #000;
        border-top-color: #000;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        position: absolute;
        top: -7px;
        left: 10px;
        z-index: 8;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
    }
    [data-tip]:after {
        display: none;
        content: attr(data-tip);
        position: absolute;
        top: -35px;
        left: 0px;
        padding: 0px 8px;
        background: #000;
        color: #fff;
        z-index: 9;
        font-size: 13px;
        height: 28px;
        line-height: 28px;
        white-space: nowrap;
        word-wrap: normal;
    }
    [data-tip]:hover:before, [data-tip]:hover:after {
        display: block;
    }
    .tip-below[data-tip]:after {
        top: 23px;
        left: 0px;
    }
    .tip-below[data-tip]:before {
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #1a1a1a;
        border-left-color: transparent;
        top: 13px;
        left: 10px;
    }

HTML会b：

<a href="#" data-tip="Tooltip text here"> some text here </a>

而不是吼叫，你可以做到右边。

如何在没有javascript或JQuery的情况下为div分配工具提示？

1 个答案: