Tooltip not showing for some unknown reason

[JonathanDDuncan]

Hi I have a project that has a table of items my first set of items (hand symbols) show the tooltip properly but the other set of items don't show the tooltip at all. I am not sure what else to check to troubleshoot this.

Both are part of the same view. either one or the other shows in the table. The only real difference between the two sets is that the one that is working shows Pngs all along with the text and the one with only text doesn't display at all. The other difference, is that the id's I am using for the second set are bigger numbers that the first.

So far I have only tested it in Chrome Version 57.0.2987.110 (64-bit). Once I get it working here I plan on testing it in other browsers too.

I've created a gist here https://gist.github.com/JonathanDDuncan/f3490fc2919c5cccc62abd0d18d63f62 showing the view functions and part of the resulting html.

If there is something else that I might be doing wrong, please let me know.

To view it go to
https://jonathandduncan.github.io/QuickSignEditor/

you will need to install a special signlanguage font on your computer first from
https://slevinski.github.io/SuttonSignWriting/components/fonts.html
as the web page won't download them for you for the time being.

Click on the hand. Then hover any of the hand and the tooltip displays

But if click on the mouth

or any other of the symbols on the maniquin. then hover over the symbols in the table, the tooltip doesn't show.

Any help or suggestions would be appreciated.

Thanks

[vipentti]

Hey!

Did some digging into the source and found at least something that should solve it. Changing the general case _ in https://github.com/JonathanDDuncan/QuickSignEditor/blob/master/src/Choosers/View.elm#L175-L186
to

            _ ->
                generalgroupchooser <| creategeneralgroupchooserdata model

Seems to fix the issue of tooltips not showing. Might have something to do with how the model is created.

[SandiCat]

I wanted to submit an issue involving tooltips, but since this one is open I might as well do it here. There are two problems: the tooltips appear farther away then they should and they linger on after the mouse leaves the item they're attached to. Here is a minimal reproduction. I think what's causing it is the combination of transform: translate(100%, 10%) and top: 10% (note the percentage, there's no issue when using px), since removing either one solves the issue. Well, the tooltips still linger, but their position is correct. This happens both on firefox and chromium.

Another issue I'm having, unique to chromium (57.0.2987.110 64-bit) is that tooltips in the demo appear blurry. This is more of a documentation issue since it doesn't happen when I use them in my project.

[JonathanDDuncan]

@vipentti Thank so much!!! I couldn't have fix my project without your help. It was invaluable. Thanks so much.

For any body else who comes across a similar issue later.
I compared the two records, the one I was caching in model and the one that I am making right in the view.
With Debug.log as such

    a =
        Debug.log "generalgroupchooserdata in model" model.generalgroupchooserdata

    b =
        Debug.log "generalgroupchooserdata freshly created" <| creategeneralgroupchooserdata model

and the logged text was identical for both.

But the modelmdl doesn't show it's data with Debug.log. So there must be different there between the because the rest was all the same.
{
symboldatalist = [{
modelmdl = {
button = Dict.fromList[],
textfield = Dict.fromList[],
menu = Dict.fromList[],
snackbar = Nothing,
layout = {
ripples = Dict.fromList[],
isSmallScreen = False,
isCompact = False,
isAnimating = False,
isScrolled = False,
isDrawerOpen = False,
tabScrollState = {
canScrollRight = True,
canScrollLeft = False,
width = Nothing
}
},
toggles = Dict.fromList[],
tooltip = Dict.fromList[],
tabs = Dict.fromList[]
},
chooseritem = {
base = 631,
name = "Check, Floor Plane",
symbolid = "02-05-009-01",
symbolkey = "S277",
unicodepua = "U+FD9A7",
validfills = "1 - 4",
validrotations = "1 - 16",
groupchooser = 6,
common = False,
feature = 0,
row = 3,
col = 2,
rank = 376
},
symbol = {
key = "S27700",
id = 1,
selected = False,
x = 0,
y = 0,
width = 20,
height = 25,
size = 1,
nwcolor = "white",
nbcolor = "black"
},
mdlid = 1085577
}],
row = 3,
col = 2
}

So that I take from this is that modelmdl doesn't like to be cached in the model. Always calculate itb fresh in the view. I was expecting it to be Pure but something isn't pure about it. I'm not sure what.

With your suggestion my problem with the tooltip is fixed. But now I am calling
creategeneralgroupchooserdata model
in three places in my program ;-( But it shouldn't kill the program.

Thanks once again.

[JonathanDDuncan]

@SandiDusic The demo tooltip shows blurry for me too.
The solution is to put
.mdl-tooltip {
will-change: unset;
}

I think that it should be added to the demo page itself and a note for us programmers to add it to your pages.
Here is where I found that solution
google/material-design-lite#4574

[vipentti]

The demo tooltips also happen blurry due to the demo using an older version of mdl. With newer versions of mdl the issue should be fixed.