This one is tricky, but here is some info that might be useful.
Here is the code that the popup consists of:
<div class="k-animation-container"
style="width: 189px; overflow: hidden; top: 411.859px; z-index: 10002; left: 968px; margin-top: 6px; height: 76px; box-sizing: content-box; display: none; position: absolute;"
aria-hidden="true">
<div role="tooltip" class="k-widget k-tooltip k-popup k-group k-reset" data-role="popup"
style="position: absolute; display: none; opacity: 0;" aria-hidden="true">
<div class="k-tooltip-content">
<table class="aw-hover-form-table">
<tbody>
<tr>
<td class="aw-hover-form-header" colspan="2">Record details</td>
</tr>
<tr class="aw-hover-form-tr">
<td class="aw-hover-form-td-label">
<span class="aw-hover-form-label">
<span style="text-align: left">Jobbtyp</span>:</span>
</td>
<td class="aw-hover-form-td-value">
<span class="aw-hover-form-value">Löpande</span>
</td>
</tr>
<tr class="aw-hover-form-tr">
<td class="aw-hover-form-td-label">
<span class="aw-hover-form-label">:</span>
</td>
<td class="aw-hover-form-td-value">
<span class="aw-hover-form-value">undefined</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="k-callout k-callout-n" style="left: 94.5px;"></div>
</div>
</div>
The CSS is inline and inserted by some JavaScript.
This is how the CSS looks like for the main element in a more readable presentation:
element.style {
width: 189px;
overflow: hidden;
display: none;
position: absolute;
top: 411.859px;
z-index: 10002;
left: 822.75px;
margin-top: 6px;
}
It might be possible to write CSS rules with higher precedence so that the inline CSS is ignored.
Should be possible to achieve by making the rules very specific or by using !important.
However, the best would be if the inline CSS was never injected in the first place.
If you are able to manipulate at least one of these rules, lets say something like:
.k-animation-container{width:1337px !important;}
And if the JavaScript injection does not ruin it, then there is hope that you will be able to reposition the tooltip.
