How to add a tooltip to a datebox/combobox in HTML,not in the javascript/jquery?

[bduguay]

I have dateboxes and comboboxes that i would like to add the tooltip to instead of having to wrap the tooltip around the datebox. I would prefer to do it in the HTML and not in javascript. Please advise.

The current method :

Code:

<a href="#" class="easyui-tooltip" title="The date the issue Occurred">
    <input id="occurrenceDate" class="easyui-datebox" name="occurrenceDate" style="width:200px"
        value="<%=CommonRoutines.getCurrentDate()%>" data-options="validType:'validDate'"/>
</a>

Thank you.

[stworthy]

Please add the code below to your page.

Code:

<script>
(function($){
	var plugin = $.fn.textbox;
	$.fn.textbox = function(options, param){
		if (typeof options == 'string'){
			return plugin.call(this, options, param);
		} else {
			return this.each(function(){
				plugin.call($(this), options, param);
				var opts = $(this).textbox('options');
				if (opts.tooltip){
					$(this).next().tooltip(opts.tooltip)
				}
			});
		}
	}
	$.fn.textbox.defaults = plugin.defaults;
	$.fn.textbox.methods = plugin.methods;
	$.fn.textbox.parseOptions = plugin.parseOptions;
	var destroy = $.fn.textbox.methods.destroy;
	$.fn.textbox.methods.destroy = function(jq){
		return jq.each(function(){
			if ($(this).next().data('tooltip')){
				$(this).next().tooltip('destroy');
			}
			destroy.call($.fn.textbox.methods, $(this));
		})
	}
})(jQuery);
</script>

Your datebox with tooltip message can be defined as:

Code:

<input id="occurrenceDate" class="easyui-datebox" name="occurrenceDate" style="width:200px"
    value="<%=CommonRoutines.getCurrentDate()%>" data-options="validType:'validDate',tooltip:{content:'tooltip message',position:'right'}"/>

[bduguay]

Thank you.

The code works fine for 1 combobox/combogrid/datebox on the page but when I have multiple of each, none of them work with this method. I've tried incrementing the tooltip number, from tooltip1 to tooltip2 for the next control etc., but that still won't allow the tooltips to show.

example:

Code:

<input id="occurrenceDate" class="easyui-datebox" name="occurrenceDate" style="width:200px"
	value="<%=CommonRoutines.getCurrentDate()%>"
	data-options="validType:'validDate',tooltip1:{content:'The date the issue Occurred'}"/>

<select id="rank" class="easyui-combogrid" name="rank" style="width:80px"
        data-options="panelWidth:360, idField:'number', textField:'title',
	tooltip1:{content:'Select the Rank for the Trouble Report'},
	columns: [[
		{field:'number', title:'', width:0, hidden:true},
		{field:'title', title:'Rank', width:40},
		{field:'description', title:'Description', width:225},
		{field:'indexPoints', title:'Index Points', width:70}
	         ]],
	onSelect: function(rowIndex, rowData) {
		$('#indexPoints').numberbox('setValue',rowData.indexPoints);
		getTotalIndexPoints();
	},
	url: '../TR_Rank_ReadServlet',
	queryParams: {<%=TR_Constants.ATTRIBUTE_ONLY_ACTIVE%>:true,<%=TR_Constants.ATTRIBUTE_MAP_LIST%>:false,
		<%=DB_Constants.DB_TR_RANK_TYPES_RANK_TYPE_NUMBER%>:<%=TR_Constants.RANK_TYPE_LEGACY%>,
		<%=TR_Constants.ATTRIBUTE_NAME_ONLY%>:true,
		<%=DB_Constants.DB_TR_COMPANIES_COMPANY_NUMBER%>:<%=sessionCompanyNumber%>,
		<%=TR_Constants.SESSION_CATEGORY_NUMBER%>:<%=sessionCategoryNumber%>}">
</select>

Please advice.
Thank you.