Pivot table header description
Answered
Hi all,
I'm trying to add some kind of tooltip on hover for pivot column names in order to describe it.
I have zero experience with JS and what I managed to do for now is adding tooltip to the whole
column and just the header.
This is what I wrote:
var x= '<div class = "id_1" style="margin:8px;padding:8px;border:1px solid blue;background-color:lightgray;position: absolute;z-index: 2;">Test Test</div>'
widget.on('ready', function(w, args){
$('td.p-value[fidx= 1] div').hover(
function() {
$( this ).append(x);
}
);
$('td.p-value[fidx= 1] div').mouseout(
function() {
$( this ).find('.id_1').remove();;
}
);
});
and the result looks like that when i hover on the first column cells
i need help to modify the code so that i could see the tool tip only when hovering on column headers.
Thanks for helping :)
Dima K
-
Hi Dima,
Not an expert myself, but it looks like you're referencing p-value, which are the value rows of the pivot.
I think you would want to change those to p-head-content or p-grand-total-head depending on if you have sub/grand totals.
Let me know if it works and I might steal it! ;)
-Brian
-
Hi Dima,
First of all, a better approach to grabbing the header element:
$('widget[widgetid="'+w.oid+'"] thead td[fidx=1] .p-head-content');This ensures you only grab DOM elements from your current widget.
Secondly, the reason you're not seeing your tooltip is that in your script it is appended to the header element itself, which is contained within a hierarchy of elements of predefined size and no overflow. So in essence, your tooltip is simply hidden behind other elements when appended to the header.
The correct way of appending tooltips is usually appending the absolutely-positioned element to the root document element and then positioning it at the mouse-hover event's coordinates. There are libraries that do this and many examples online.
However if all you want is to display a simple text, you can use the native "title" HTML attribute that is available in all browsers, which would simplify your code to:
widget.on('domready', function(w, args) {
var headerElement = $('widget[widgetid="'+w.oid+'"] thead td[fidx=1] .p-head-content');
headerElement.attr('title', 'Test Test');
});And look like this:
-
Hi Brian, sure!
If you want to add the same static text to all "members" of a specific dimension column (in this case, the first one) you would use:
$('widget[widgetid="'+w.oid+'"] tbody td[fidx=0].p-dim-member');Alternatively, if your pivot has multiple dimension levels that can be drilled from and you'd like to label all of them, you could omit the [fidx=0] part, as the p-dim-member CSS class is applied only to dimension ("rows") columns and not to value columns.
-
Hi Moti,
You probably have tired of answering questions on this post so sorry about that.
I hope you would be able to help me with a similar subject.
I have pivot with a value I calculate in R and take it back to Sisense, I want to add for each row the Confidence interval I calculate for each row as a tooltip (this time the value is dynamic and need to be calculated).Basically, I want to do something like this plugin (link) but in a pivot.
This is what i have now in Sisense:
This what i want to have in Sisense:
Is it possible to do via script or it requires to develop a dedicated plugin?
-
Hi Dima,
In case you haven't resolve this yet yourself (It's been a while - my apologies):
I would generally recommend doing this in a plugin either way, since this will end up being more than a few lines of code and it's easier to maintain in a plugin than in scripts that might be copied over from widget to widget.
In either case, it should still be doable with a similar approach as mentioned in this post to actually showing the tooltip, but you would be processing each individual row of the pivot, extracting these values from the appropriate cells and then setting the tooltip to the applicable value cell.
This is assuming the confidence factors differ from row to row - if they do not, perhaps it would be possible to omit them from the pivot altogether and instead run a separate JAQL query using AJAX to retrieve these values and then apply the tooltip to all rows exactly as one of the comments above suggests.
Please sign in to leave a comment.
Comments
10 comments