Question

首先，我没有使用jQuery，我想知道是否有任何方法可以强制显示输入框工具提示。（我想使用此工具提示告诉用户输入另一个用户名和/或密码是不可接受的。）

function change(){
    if (document.getElementById('myTextField').value.length < 5){
        alert('show the tooltip in this case ');
    }
}

#myTextField{
    
}

<input type="text" id="myTextField"/>
<input type="submit" id="myButton" value="click me !" onclick="change()"/>

Answer 1

正如@Roope在上面的评论中所提到的，你可以使用data元素和CSS伪元素。

data元素可以通过以下两种方式访问：javascript和CSS。但是在CSS（到目前为止）中，您只能在伪元素content和::after的{{1}}属性中访问它，这足以仅在CSS中管理工具提示（几乎） / p>

P.S。代码仅在Chrome上进行测试（转换属性可能需要在其他浏览器上使用前缀）

::before

function change(){
    document.getElementById('myTooltip').style.opacity = '1';
    if (document.getElementById('myTextField').value.length < 5){
        document.getElementById('myTooltip').setAttribute('data-tooltip', 'tooltip text');
    }
}

function keyPress(){
    document.getElementById('myTooltip').style.opacity = '0';
}

#myTooltip {
  position: relative;
  opacity: 0;
  transition: opacity .3s;
}

#myTooltip:before {
  position: absolute;
  top: 180%;
  width:160px;
  margin-bottom: 5px;
  margin-left: 5px;
  padding: 7px;
  background-color: #000;
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  line-height: 1.2;
}

#myTooltip:after {
  position: absolute;
  top: 155%;
  left: 85px;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: "";
  font-size: 0;
  line-height: 0;
}

强制输入框工具提示/标题出现

1 个答案: