Hover warp for row/cell misbehaves

Smart GWT Technical Q&A
1

I am trying to implement a hover text for when a user moves mouse over a ListGrid record to show some extra information that I do not want to be part of the ListGrid itself. I have successfully implemented the RowHoverHandler mechanism, but when I try to define that I do not want the hover text to wrap, I hit a wall.

A simple code case of what I am trying to achieve and what I get can be seen below and in the attached files. I am using latest svn smartgwt code and GWT 2.0.4 (dev and host modes), Chrome dev latest and FF 3.6.8 under Linux Ubuntu 10.04.1 LTS.

	@Override
	public void onModuleLoad() {
		Canvas canvas = new Canvas();

		final ListGrid countryGrid = new ListGrid();
		countryGrid.setWidth(500);
		countryGrid.setHeight(224);
		countryGrid.setShowAllRecords(true);
		countryGrid.setAlternateRecordStyles(true);
		countryGrid.setCanHover(true);
		countryGrid.setHoverWrap(false);

		ListGridField nameField = new ListGridField("countryName", "Country");
		ListGridField continentField = new ListGridField("continent", "Continent");
		ListGridField countryCodeField = new ListGridField("countryCode", "Country Code");

		countryGrid.setFields(nameField, continentField, countryCodeField);

		countryGrid.setCanResizeFields(true);
		countryGrid.setData(CountryData.getRecords());
		

		countryGrid.addRowHoverHandler(new RowHoverHandler() {
			
			@Override
			public void onRowHover(RowHoverEvent event) {
				countryGrid.setHoverCustomizer(new HoverCustomizer() {
					
					@Override
					public String hoverHTML(Object value, ListGridRecord record, int rowNum,
							int colNum) {
						GWT.log("On Hover!");
						return hoverText;
					}
				});
				
			}
		});
		
		canvas.addChild(countryGrid);
		canvas.draw();

	}

LIstGridHoverIssue.java (2.14 KB)

ListgridHoverWrapIssue.png
ListgridHoverWrapIssue.png526×253 11.6 KB

2

See setHoverWidth(). Default width is 100px.

3

Yes I have seen that, but I do not want to define a width. I want it to not wrap and behave like the tooltip wrap, where width doesn’t have to be defined.

4

You can place tooltip inside HTML element with ‘nowrap’. Like this:

        nameField.setHoverCustomizer(new HoverCustomizer() {
            @Override
            public String hoverHTML(Object value, ListGridRecord record, int rowNum, int colNum) {
                String tooltip = "my long-long tooltip content";
                return "<div style=\"white-space:nowrap;\">"+tooltip+"</div>";
            }
        });
5

Very good idea. Not the support I would expect from the API, but a good workaround instead. Thanks for your insight.