0

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>";
}
Garfield
  • 2,487
  • 4
  • 31
  • 54
Andegosu
  • 19
  • 1
  • 6
  • 1
    well, [have your read this](http://stackoverflow.com/questions/3249591/how-can-i-display-a-tooltip-on-an-html-option-tag) -- whoops! looks like, you don't do something wrong on the tooltip part, just make sure that it outputs `" ?>` in [phpfiddle](http://phpfiddle.org/) it actually works... – Bagus Tesa Dec 29 '16 at 11:05
  • Check out this existing [question](http://stackoverflow.com/questions/3249591/how-can-i-display-a-tooltip-on-an-html-option-tag). – Michael Sacket Dec 29 '16 at 11:10
  • Apparently it was working with my initial code, but I it's a delay on about 2 seconds which I didn't notice. Seems to be a delay on most actions on the server, which is a another problem for me to solve. Thank you for your answer. – Andegosu Dec 29 '16 at 11:15
  • Just so you aren't going down a rabbit hole, the tooltip delay isn't a server issue. The delay in a title-based tooltip's appearance is dependent upon the browser you are using. The only way to get it to appear quicker is implement something in javascript using `onmouseover` event. – Michael Sacket Dec 29 '16 at 11:25
  • Ok, thanks for the heads up. Although I have some delay when clicking the radio buttons as well. – Andegosu Dec 29 '16 at 11:29
  • You need to get in the habit of [accepting answers](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) which help you to solve your issues. You'll earn points and others will be encouraged to help you. – Jay Blanchard Feb 03 '17 at 14:08

2 Answers2

3

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>
RJParikh
  • 4,096
  • 1
  • 19
  • 36
  • 1
    Yes, I had the title attribute included in my code. I didn't notice the tooltip at first due to delay on the server, so I thought it didn't work. Not sure why there is such a huge delay tho. – Andegosu Dec 29 '16 at 11:17
0

.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>
Sarika Koli
  • 773
  • 6
  • 11