Sample tooltips

by ptomblin

HTML

<h2>This is simple "title" type tooltips based on html</h2>
<h4>Note: you can't do html in the tooltip</h4>
<select name="abc">
    <option title="first tooltip blah blah blah
and more and more and more
and more and a third line
and a forth line">First</option>
    <option title="second tooltip">Second</option>
</select>
<h2>This is a much more complicated popup that uses javascript to popup</h2>
<div id="first_opt_popup" class="dialog">
    <p>This is a popup that allows <strong>some</strong> html</p>
    <ol>
        <li>Showing an ordered list</li>
        <li>with a couple of different items in it</li>
        <li>and nothing else</li>
    </ol>
</div>
<div id="second_opt_popup" class="dialog">
    <p>Another popup</p>
</div>
<select name="abc" id="popupper">
    <option title="first tooltip blah blah blah
and more and more and more
and more and a third line
and a forth line">First</option>
    <option title="second tooltip">Second</option>
</select>

JavaScript

$(function() {
    $( ".dialog" ).dialog({ autoOpen: false});
    //$('#first_opt_popup').dialog('open');
 });

$('#popupper').on('change', function() {
    $('.dialog').dialog('close');
    val = $(this).val();
    if (val == "First") {
        $('#first_opt_popup').dialog('open');
    } else {
        $('#second_opt_popup').dialog('open');
    }
});