JSFiddle - React, Tailwind, and code Playground

by ZeNz0r

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<select safety="" name="bookSafety" style="width:45px;">
    <option value="" '.selectValue("bookSafety", "", "select").'>00</option>
    <option value="1" '.selectValue("bookSafety", "1", "select").'>01</option>
    <option value="2" '.selectValue("bookSafety", "2", "select").'>02</option>
    <option value="3" '.selectValue("bookSafety", "3", "select").'>03</option>
</select>
<div class="bookKidsSeparator"></div>
<select booster="" name="bookBooster" style="width:45px;">
    <option value="" '.selectValue("bookBooster", "", "select").'>00</option>
    <option value="1" '.selectValue("bookBooster", "1", "select").'>01</option>
    <option value="2" '.selectValue("bookBooster", "2", "select").'>02</option>
    <option value="3" '.selectValue("bookBooster", "3", "select").'>03</option>
</select>

JavaScript

$(function() {
	$( document ).tooltip({
		items: "img, [safety], [booster], [title]",
		content: function() {
			var element = $( this );
			if ( element.is( "[safety]" ) ) {
				var myImg = "<div class='kidsImg'><img src='http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png'>";
				var myText = "<p>Children from 9 months to 4 years old</p></div>";
				return myImg+myText;
			}
			if ( element.is( "[booster]" ) ) {
				var myImg = "<div class='kidsImg'><img src='http://static.adzerk.net/Advertisers/be222d1119cc49abb6bfdbe745e7d475.png'>";
				var myText = "<p>Children from 4 to 9 years old</p></div>";
				return myImg+myText;
			}
			if ( element.is( "[title]" ) ) {
				return element.attr( "title" );
			}
			if ( element.is( "img" ) ) {
				return element.attr( "alt" );
			}
		}
	});
});