Mouse over - display tip to the right instead of under?

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
lueu
Posts: 89
Joined: Tue Mar 07, 2023 11:49 pm

Mouse over - display tip to the right instead of under?

Post by lueu »

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
2023-05-22_12-34-56.png (6.48 KiB) Viewed 1813 times
lueu
Posts: 89
Joined: Tue Mar 07, 2023 11:49 pm

Re: Mouse over - display tip to the right instead of under?

Post by lueu »

Anybody? I would think I could use some css, but haven't been able to figure out how to target the tooltip.
joben
Posts: 221
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Mouse over - display tip to the right instead of under?

Post by joben »

This one is tricky, but here is some info that might be useful.

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>
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:

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;
}
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:

Code: Select all

.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.
Regards, Joakim

Image
joben
Posts: 221
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Mouse over - display tip to the right instead of under?

Post by joben »

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?
Regards, Joakim

Image
lueu
Posts: 89
Joined: Tue Mar 07, 2023 11:49 pm

Re: Mouse over - display tip to the right instead of under?

Post by lueu »

Thanks joben, we will try it out! :D
Post Reply