How to create a tooltip to select in HTML?

Question

I want to create a tool-tip when clicking on the menu. But it is not working properly. It gives the output as below image.

Get

But I want it as the below image.

Want

Here is my HTML code.

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

Here is my CSS code.

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

In your code, you are not creating a tooltip. You are creating the span that just shows the content. Style the span and apply some js to show and hide accordingly. Or if you want to use HTML Tooltips, http://stackoverflow.com/questions/484137/is-it-possible-to-format-an-html-tooltip-title-attribute this question should help to style them. — Bhuvana, Dec 11 '14 at 06:26

score 1 · Accepted Answer · answered Dec 11 '14 at 06:44

you should put a class and style it like that :

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

and then remove anything not necessary like

label.atooltip {outline:none; }

so your code should be like this:

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

How to create a tooltip to select in HTML?

1 Answers1