If you're creating a mashup that includes embedded Qlik Sense charts, there's a couple issues you may run into that you'll want to be aware of.

 

First, if your mashup scrolls, and you scroll down the page, you will notice that the tooltips on the Qlik Sense charts are not positioned correctly, like below:

2017-06-07 11_20_25-Marató Barcelona.png

The tooltips will get more and more displaced the further down the page you scroll. For the tooltips to be positioned correctly, you'll have to adjust how scrolling happens on your page a little bit.

 

The easiest option that you can implement with just some CSS is to set the html and body tags to a height of 100%, hide the overflow on the html tag, and add use overflow: auto on the body tag. That looks like this:

html, body {
height: 100%;
overflow: hidden;
}
body {
overflow: auto;
}









 

Now the tooltips will no longer be displaced when you scroll your mashup. However, there are times when it may be necessary to watch the scroll position of the page, or be able to set the scroll position of the page programmatically, and for some reason, when using the above method the scrollTop attribute of the body tag never actually updates, so there is no way to observe when the page scrolls or set the scroll position programmatically.

 

In instances like this, just a simple extra step will fix the issue. What you'll need to do is add a wrapper element that wraps the entire content of your mashup, and also set that to a height of 100%, and put the overflow on that element. That element's scrollTop will be set correctly, and you can observe or set it programmatically. So, it would be something like this:

<head>
<style>
  html, body, #page-content {
    height: 100%;
    overflow: hidden;
  }
  #page-content {
    overflow: auto;
  }
</style>
</head>
<body>
<div id="page-content">
  <!-- All of your content -->
</div>
</body>









 

The other issue you may run into is the chart tooltip not be styled correctly, since it may be affected by the CSS in your mashup. The most common example I see of this is if using Bootstrap v4. Bootstrap v4 adds some negative margins to the .row class, and the tooltip also uses the row class, and it makes the text in the tooltip get cut off, like this:

2017-06-07 12_11_20-Marató Barcelona.png

To fix this, and any other styling issues you may have with the tooltips, it's helpful to be able to inspect it. A div with the class .qs-chart-tooltip will be appended near the end of the body. If you inspect the page and find that element, then expand it, it's first child element is a div that has display: none set, just uncheck that style and you'll be able to view the tooltip in it's last location. Then you can continue to expand those child elements and inspect the element, looking for any issues. In the case I show above, as I stated, the problem is with Bootstrap v4 and it's negative margins on the .row class. So the css below fixed the tooltip:

.qv-chart-tooltip-inner .row {
margin-left: 0;
margin-right: 0;
}


 

So, now you should be able to address these Qlik Sense chart tooltip issues I often see in mashups. If you have any questions, let me know!