Mouse over - display tip to the right instead of under?
Mouse over - display tip to the right instead of under?
Is there any way to make the mouse over tool tip display to the right instead of under? It is a little annoying that the tool tip displays over the next record or the next page button.
- Attachments
-
- 2023-05-22_12-34-56.png (6.48 KiB) Viewed 2133 times
Re: Mouse over - display tip to the right instead of under?
Anybody? I would think I could use some css, but haven't been able to figure out how to target the tooltip.
Re: Mouse over - display tip to the right instead of under?
This one is tricky, but here is some info that might be useful.
Here is the code that the popup consists of:
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:
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:
And if the JavaScript injection does not ruin it, then there is hope that you will be able to reposition the tooltip.
Here is the code that the popup consists of:
Code: Select all
<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>
This is how the CSS looks like for the main element in a more readable presentation:
Code: Select all
element.style {
width: 189px;
overflow: hidden;
display: none;
position: absolute;
top: 411.859px;
z-index: 10002;
left: 822.75px;
margin-top: 6px;
}
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:
Code: Select all
.k-animation-container{width:1337px !important;}
Re: Mouse over - display tip to the right instead of under?
By the way, I figured out it might be possible to change the position via a KendoUI JavaScript.
Check out this example: https://docs.telerik.com/kendo-ui/api/j ... n/position
This is a better solution if it works.
Is anyone able to figure out how to write a script for this in AwareIM?
Check out this example: https://docs.telerik.com/kendo-ui/api/j ... n/position
This is a better solution if it works.
Is anyone able to figure out how to write a script for this in AwareIM?
Re: Mouse over - display tip to the right instead of under?
Thanks joben, we will try it out!