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

Title: How to add a tooltip to a datebox/combobox in HTML,not in the javascript/jquery?
Post by: bduguay on March 16, 2015, 11:40:53 AM

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.

Title: Re: How to add a tooltip to a datebox/combobox in HTML,not in the javascript/jquery?
Post by: stworthy on March 17, 2015, 08:42:40 AM

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'}"/>

Title: Re: How to add a tooltip to a datebox/combobox in HTML,not in the javascript/jquery?
Post by: bduguay on March 17, 2015, 10:45:07 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: bduguay on March 16, 2015, 11:40:53 AM