您想要一个工具提示吗？

Question

我正在努力实现这一目标。
http://i.stack.imgur.com/9sAKz.png
基本上我有一个输入，我想添加该图标，以便在用户将鼠标悬停时显示工具提示。我的主要问题是知道最佳实践，以便在输入中插入该图标而不破坏html结构（响应式或旧式）。

EDIT1：这是我一直试图使用的逻辑。

.wrapper{
  position:relative;
  display:inline-block;
  }

.myImage{
  position:absolute;
  top:3px;
  right:5px;
  }

<div class="wrapper">
  <input type="text">
  <img class="myImage" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/16/information-icon.png">
  </div>

我正在开发一个插件，我收到字段ID，然后在这些输入中创建图标，以便稍后我可以显示工具提示。

我试图访问一个网站，该网站使用较旧的结构化表单而不是响应式表单。并且很少有人使用“display：inline-block”在显示方面被打破。

PS：我的问题是在一些较旧的结构化表单中设置包装器div + display：inline-block，其中一些在应用这些属性后会保持断开状态（在原始位置之外）。

Answer 1

您可以使用pseudo element来实现此类功能。

伪元素不能直接放在输入标记
上

，我已将输入包装在一个div中并将伪替换为：

＆＃13;

div {
  display: inline-block;
}
.cp3 input {
  width: 50px;
}
input {
  padding: 10px;
  height: 30px;
}
.cp4 {
  position: relative;
  transition: all 0.8s;
}
.cp4:hover:before {
  content: "";
  position: absolute;
  right: 5%;
  height: 30px;
  width: 30px;
  background: url(http://cdn.flaticon.com/png/256/64494.png);
  background-size: 30px 30px;
  top: 10px;
}

＆＃13;

<div class="wrap">
  <div class="label">Postal Code</div>

  <div class="cp4">
    <input type="text" />
  </div>
  <div class="cp3">
    <input type="text" />
  </div>

</div>

＆＃13;

您想要一个工具提示吗？

使用绝对定位的元素，您可以在悬停图标时使用~ (sibling selector)显示工具提示。

让任何一种淡入淡出＆＃39;使用css，我已经将opacity:0 --> opacity:1应用了一个很好的转换。这可以在下面的例子中显示：

＆＃13;

.myInput {
  position: relative;
  display: inline-block;
  height: 30px;
  width: 200px;
  background: gray;
  transition: all 0.8s;
}
.myInput div,
input {
  position: absolute;
  display: inline-block;
}
input {
  height: 30px;
  width: 200px;
}
.tooltip {
    transition: all 0.8s;
  opacity: 0;
  height: 30px;
  width: 30px;
  position: absolute;
  background: url(http://cdn.flaticon.com/png/256/64494.png);
  background-size: 30px 30px;
  right: 0;
  top:5%;
}

.myInput:hover .tooltip{
  opacity:1;
  }

.tooltip:hover ~.msg{
  opacity:1;
  }
.msg{
  transition: all 0.8s;
  top:35px;
  left:100px;
  opacity:0;
  }
.toRight{
  top:0;
  left:220px;
  width:300px;
  }

＆＃13;

Hover the textbox, then the icon
<br/>
<hr/>
<br/>
<div class="myInput">
  <input type="text" placeholder="text here" />
  <div class="tooltip"></div>
  <div class="msg">message here</div>
  <div class="msg toRight">Or even here</div>
</div>

＆＃13;

Answer 2

这是css

#icn{
    background-image:url(http://www.veryicon.com/icon/png/System/Dustbunnies%20Full/info.png);
    background-repeat:no-repeat;
    background-position:right;
    background-size:12px 12px;
    padding-right:15px;

}

这是你的html示例：

<input id="icn" type="text">

我已将图像设置为背景

http://jsfiddle.net/kx6s5yfs/

Answer 3

<input type="text" name="postalcode" class="postalcode" />

.postalcode{
    background-image: url("abc.jpg"); 
    background-repeat: no-repeat; 
    background-position: 3%;
}

在输入内插入图标而不会破坏

3 个答案:

您想要一个工具提示吗？