Why is the tooltip showing at the top left, instead of where the pointer is?

Question

All the views I embed in my asp.net application display the tool tip at the top left of the viz as opposed to where the mouse is hovering. How can I fix/change this? I would expect the box to appear next to the hand/mouse. In some cases I can't select options on the popup because its too far from the mouse and when you move it to the box it is no longer hovering over the item and the box closes.

It's putting zero for the location, how can I get it to use the mouse location?

<div class="tab-tooltip tab-widget tab-tooltipBR" style="left: 0px; top: 0px; display: block; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; ">

I tried doing a direct link with the iframe and it doesn't happen. It only does this when using trusted connection and using javascript to load the viz into a div tag.

It also does it with a direct link using javascript to load so it has something to do with how its being initiated with JS. I took the code from the example so I'm not sure what could be wrong.

<div id="tableauViz" style="width:100%; height:100%; min-height:900px"></div>

if(viz) viz.dispose();
var placeholderDiv = document.getElementById("tableauViz");
var url = 'https://#####.com/trusted/' + ticket + _tabpath;
var options = {
                width: placeholderDiv.scrollWidth,
                height: placeholderDiv.scrollHeight,
                hideTabs: false,
                hideToolbar: true,
                onFirstInteractive: function () {
                    workbook = viz.getWorkbook();
                    activeSheet = workbook.getActiveSheet();
                    //apply filters ....
                     }
               }
viz = new tableauSoftware.Viz(placeholderDiv, url, options);

I removed all css from the project and it still loads at the top left.

https://community.tableau.com/thread/218147

Is that inline style all the CSS you have related to the position of the tooltip? — Kurospidey
The inline CSS is created on the tableau server and outside of my control, I just narrowed it down to that line as to what was setting the position. — robbpell
top: 0 left: 0 can mean different things depending on the positioning of the element. For example, if the tooltip has position: absolute it would mean it will always appear at the top left of the screen. if the tooltip has a position relative to its father, it means it would appear at the top left of the father bounding box. — Kurospidey
if you want to set its position to where the pointer is you have to do it with javascript. Do you want me to show you an example or this is not the problem? — Kurospidey
the 0,0 position is relative to the div, but yes if I could override the position based on the line generated that would work (I can't change the code as I'm not generating it so I can't add an ID tag) based on the current mouse location that could work. — robbpell

Kurospidey Kurospidey · Accepted Answer · 2016-11-01T17:46:51

I'm using jQuery in my example, but it can be made with regular JavaScript too.

The thing here is you want to set the CSS of the tooltip element once the document is ready and over the CSS the server is setting. For that we'll use the following jQuery code (remember, it has to be made on document ready):

$('.content').on('mousemove', function(e) {
  $('.tooltip').css({
    top: e.pageY,
    left: e.pageX,
    display: 'block'
  });
});

$('.content').on('mouseout', function() {
  $('.tooltip').css({
    display: 'none'
  });
});

I'll leave you a fiddle with all the code so you can see how it works: https://jsfiddle.net/emwovbmv/55/ (to check the behavior move your mouse inside the grey square).

Mousemove is more intrusive than mouseenter, but it tracks your mouse position all the time so that the tooltip moves accordingly.

Tell me if it works for you or if you have any doubts.

Why is the tooltip showing at the top left, instead of where the pointer is?

1 Answers