0

I found several posts on this but none had an answer that works for my scenario. This post was the closest I could find.
Currently, the tooltips on my ASP.NET web pages have been formatted (using CSS) and display correctly when hovered over, but also appear (using jquery 1.12.1) at the foot of the page as a list of DIVs each time a tooltip displays - on some pages there are over 20 so the page gets very 'busy' if the user hovers over multiple items.
Following the suggestions in the linked post, if I add the link to the js ui file (as below) in the HEAD section of my pages, the divs stop appearing but the formatting for the tooltips is partially lost.

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

This is the CSS for the tooltip:

.ui-tooltip {
background-color: #E8EFFD;
padding: 4px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #5787D2;
box-shadow: 0 0 5px #5787D2;
font-size: 0.9em;}

body .ui-tooltip {
border-width: 2px;}

Initially I though the only difference after adding the link was the font being larger, but when hovering over a disabled control, I noted the background colour and the html formatting is being lost. For enabled controls, these have retained the background colour of the tooltip.
I added a disabled class for the tooltip, but that didn't make any difference:

        .ui-tooltip:disabled {
        display: none;
    }

Does anyone know how I retain the existing font size, background colour and formatting using this logic?

The tooltip when it creates the divs: tooltip which creates divs
The tooltip when the divs are removed: tooltip following addition of css link
The tooltip over an enabled control: tooltip displayed over an enabled control
The tooltip over a disabled control: tooltip displayed over a disabled control

Is my only option to go back to 1.10.? of jquery which doesn't add the DIV tags, but if so, will it still cause the same issues with the disabled controls?
Many thanks
Martin

MartinS
  • 111
  • 1
  • 14
  • The dupe has this: `.ui-helper-hidden-accessible{ display: none; }` – mplungjan Sep 07 '20 at 14:44
  • Thanks. Agreed, and I hadn't tried that - removing the link to the jquery file and adding this line to my CSS removes the divs at runtime, sadly it doesn't fix the issues around formatting of the tooltips outlined above. – MartinS Sep 11 '20 at 08:07

0 Answers0