Javascript 如何使用一些图像或图例添加到工具提示？

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

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

---

您可以使用HTML5

数据

属性，而不是将

标题

属性与

输入

元素一起使用。下面是使用

数据

属性和纯css制作的工具提示。此外，

输入[type=“text”]

元素不支持

：在
之后或
：在
之前伪元素

让我们先看看

HTML代码

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

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

为了获得更好的可用性，您可以在输入字段之前或之后放置一个小的
？
图标。通常情况下，这是不同的实现方式，您有这样一个链接：
，然后使用CSS使span不可见：
a.tooltip span{display:none}
，然后在链接悬停时显示它：
a.tooltip:hover{position:relative；display:block}
和tada，您有一个工具提示，可以在其中放入任何您喜欢的内容。通常您总是希望使用一些javascript来抑制链接的单击事件。
l=document.getElementsByClassName（'tooltip'）；for（i=l.length-1；i>0；++i）{l[i].onclick='return false'}
这就是我的意思吗？非常感谢投票通过的Kheema，现在你把这个用于所有标签，但我需要它用于特定的标签，我应该如何更改它。你可以使用像
标签[for=“one”]
；HTML将是：-
名称：
检查演示。你能分享第二个演示的代码吗？