CODEWITHSUNDEEP
phpjqueryhtmldropdown
Andegosu
Andegosu

Reputation: 19

Show tooltip on hover over option in dropdown selector

How can I show a tooltip while the user hovers over a specific option in a dropdown?

I have this code which prints out a dropdown question based on XML code which is supposed to show tooltips on some of the options in the dropdown selector:

function createDropdownQuestion($node, $name)
{
    print "<select class='form-control'name=\"$name\" id=\"$name\>";
    $i = 0; 
    foreach($node->childNodes as $option)
    {
        if(nodeIsValidOption($option))
        {
            if ($option->hasAttribute("tooltip"))
            {
                print "<option title='Show this tooltip' value=\"$i\">$option->nodeValue</option>";
            }
            else
            {
                print "<option value=\"$i\">$option->nodeValue</option>";
            }
            $i++;
        }
    }
    print "</select>";
}

Upvotes: 0

Views: 8437

Answers (2)

Sarika Koli
Sarika Koli

Reputation: 783

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
<!DOCTYPE html>
<html>

<body style="text-align:center;">

  
  <br/>
  <br/>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Upvotes: 0

RJParikh
RJParikh

Reputation: 4166

Use title="TOOLTIP TITLE".

For e.g: <option title="tooltip">test</option>

<select id="">
  <option title="test">test</option>
  <option title="test 123">test123</option>
 </select>

Upvotes: 3

Related Questions