如何创建一个工具提示以在HTML中选择？

Question

我想在点击菜单时创建一个工具提示。但它不能正常工作。它将输出结果如下图所示。

但我希望它如下图所示。

这是我的HTML代码。

<label class="aToolTip">
    <select style="font-family: 'SSemibold'; font-size:13pxpx; color:#5b5b5b; margin-left: 10px;" class="required">
        <option value="none">Default Format*</option>
        <option value="PS4">PlayStation 4</option>
        <option value="PS3">PlayStation 3</option>
        <option value="XB1">XBox One</option>
        <option value="XB360">XBox 360</option>
    </select>

    <span>
        <img class="callout" style="background:#ffffff;" src="images/callout.png" /><br />
            We will always try to end games from your default format <br /> <br />
    </span>
</label>

这是我的CSS代码。

label.atooltip {outline:none; }
label.atooltip strong {line-height:30px;}
label.atooltip:hover {text-decoration:none;} 
label.atooltip span {
  z-index:10;display:none; padding:14px 20px;
  margin-top:-30px; margin-left:28px;
  width:300px; line-height:16px;
}
label.atooltip:hover span{
  display:inline; position:absolute; color:#111111;
  border:2px solid #eeeeee; background:#ffffff;
}
.callout {
  z-index:20;
  position:absolute;
  top:30px;
  border:0;
  left:-12px;
}
label.atooltip span {
  border-radius:4px;
  box-shadow: 5px 5px 8px #CCC;
}

Answer 1

你应该把它放在一个类并且样式：

.MyMenu select {background: transparent;
   border: none;
   font-size: 18px; }

然后删除任何不必要的内容，例如

label.atooltip {outline:none; }

所以你的代码应该是这样的：

<label class="aToolTip">
<div class="MyMenu"> 
    <select style="font-family: 'SSemibold'; font-size:13pxpx; color:#5b5b5b; margin-left: 10px;" class="required">
        <option value="none">Default Format*</option>
        <option value="PS4">PlayStation 4</option>
        <option value="PS3">PlayStation 3</option>
        <option value="XB1">XBox One</option>
        <option value="XB360">XBox 360</option>
    </select>
    </div>