JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<label for="one">jQuery UI tooltip</label>
<select id="one">
    <option title="foo">foo</option>
</select>
<br />

<label for="two">Native tooltip</label>
<select id="two">
    <option title="bar">bar</option>
</select>

CSS

/*
http://bugs.jqueryui.com/ticket/8708

IE 6 through IE 10 = ???

Firefox 16 on OS X = Custom tooltip displayed

Opera 12 on OS X   = No tooltip

Chrome 22 on OS X  = Native tooltip displayed
Safari 6 on OS X   = Native tooltip displayed
*/

body { padding: 20px; }
#two { margin-top: 50px; }

JavaScript

$('#one option').tooltip();