如何添加一些图片或传说的工具提示？

Question

我已经创建了一个用于文本框的工具提示，但问题是用户不知道文本框中有工具提示。我的问题是，我应该在文本框中添加什么，用户将知道有工具提示，而不仅仅是当他将其悬停时，工具提示将显示。

<input class="path-width"  id="Url" name="Url" title=" services can be accessed. e." type="text">

Answer 1

与使用title属性和input元素不同，您可以使用HTML5 data属性。下面是使用data属性和纯css制作的工具提示。此外，input[type="text"]元素不支持:after或:before伪元素。

让我们先来看看演示。

HTML代码

<p>
  <label for="id" datatip="Hi I am ToolTip">Name:</label>
   <input type="text" value="" />
</p>

CSS代码

p{position:relative; display:inline-block; width:50%;}
label:after
{
content: "?";
position:absolute;
right:-20px;
background:gold;
color:red;
width:18px;
height:18px;
font-size:.9em;
text-align:center;
border-radius:50%;
transition: all .3s;
border:1px solid red;
margin:0 0 0 10px;
}
label:hover:before
{
content:attr(datatip); 
position:absolute;
z-index:0;
right:-230px;
top:-100px;
top:0;
transition: all .3s;
width:200px;
border:1px solid red;
}

input{width:200px;}