Question

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

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

Answer 1

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

让我们先看看 DEMO 。

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;}

如何添加一些图像或图例的工具提示？

1 个答案: