Tooltip is not working in responsive table

Tooltip is not working in responsive table

  

I'm working on a site that has a table with a header.

The header cells have tooltips associated with it.


When the site is rendered in a smaller device (for instance a mobile device) the table is readjusted to fit the new window size.

However the tooltip does not seem to be working, as I see the Javascript content of the tooltip, instead of the expected behavior (a tooltip of text when I hover the header cell).




I think that your screenshot answer my first question but I will ask anyway.

How are you doing your tooltip? With Javascript inside an expression, with CSS or with a HTML extended property?

I would suggest using the "title" extended property of HTML. It will work as shown here.

Thanks for your reply SamyCode, but I think you misunderstood my post.

I know how to use the "title" attribute to generate tooltips. I've used that in the past many times. In this case however what I am using is the "tooltip" Web Block that comes out of the box in OutSystems (SilkUI).


This Web Block will not render the standard "title" attribute, but instead it uses javascript to present a tooltip like the one you see in picture below.


What I was reporting is that when the table is rendered in a smaller screen (ex: mobile) the table adopts a new format (each table row is converted to a container with a list of "cell name --- cell value"), and when that happens the tooltip seems to have a bug because it is rendering the javascript code as plain text, instead of presenting the tooltip as expected.

Hmm, this is weird. Could be a bug. Why you don't try this tooltip from Forge?