Tooltip on select box options
<p>I have a select box in which the options have policy name. I need to display the description of policies in tool tip of the options. I tried tipr plugin where data-tip option is used for this. It works fine for div, span etc but not for select box option. I also tried normal method that I attached in the above link. This works only when the drop down is open by default .</p>

<pre><code>&lt;div&gt;
    &lt;h4&gt;Default behaviours&lt;/h4&gt;
    &lt;select&gt;
        &lt;option title=""&gt;&lt;/option&gt;
        &lt;option title="1"&gt;1&lt;/option&gt;
        &lt;option title="2"&gt;2&lt;/option&gt;
        &lt;option title="3"&gt;3&lt;/option&gt;
        &lt;option title="4"&gt;4&lt;/option&gt;
    &lt;/select&gt;

    &lt;select multiple&gt;
        &lt;option title=""&gt;&lt;/option&gt;
        &lt;option title="1"&gt;1&lt;/option&gt;
        &lt;option title="2"&gt;2&lt;/option&gt;
        &lt;option title="3"&gt;3&lt;/option&gt;
        &lt;option title="4"&gt;4&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;div&gt;
    &lt;h4 class='uitip' title='Tests with jQuery UI Tooltips applied'&gt;jQuery UI tooltips&lt;/h4&gt;
    &lt;select class='uitip' title='has tooltips'&gt;
        &lt;option title=""&gt;&lt;/option&gt;
        &lt;option title="1"&gt;1&lt;/option&gt;
        &lt;option title="2"&gt;2&lt;/option&gt;
        &lt;option title="3"&gt;3&lt;/option&gt;
        &lt;option title="4"&gt;4&lt;/option&gt;
    &lt;/select&gt;

    &lt;select multiple class='uitip' title='has tooltips'&gt;
        &lt;option title=""&gt;&lt;/option&gt;
        &lt;option title="1"&gt;1&lt;/option&gt;
        &lt;option title="2"&gt;2&lt;/option&gt;
        &lt;option title="3"&gt;3&lt;/option&gt;
        &lt;option title="4"&gt;4&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/slolife/Dp4te/" rel="nofollow noreferrer">http://jsfiddle.net/slolife/Dp4te/</a></p>

<p>Any suggestions please?</p>