Button tooltips don't always fade out on some browsers

[francescogabbrielli]

Hi! I observed this also on Mozilla, but IE is the one that presents the issue more consistently:

Tooltips just keep hanging out in the page indefinitely.

Any workaround? Or a hint to where in the code is best to put the hands to improve tooltips user experience?

Thanks!

[bago]

I'm unable to reproduce it (can you reproduce it on mosaico.io ? ) . BTW they are jquery tooltips. Are used via "knockout-jqueryui" library and the only mosaico code is the binding in src/js/bindings/tooltips.js .

[francescogabbrielli]

Here the tooltip is following the cursor all the way around. I added a few blocks and edited the text.

[bago]

Specific version of browser/OS?

[francescogabbrielli]

IE 11 on Windows 10
Firefox Quantum 63, Win10 (more rarely)

I understand is more of a jquery issue.

---

Also I would like to put in the tooltip the label of the block in the Block palette instead of "Click and drag etc..", but I didn't find a way.
The best I can do is this (in toolbox.tmpl.html):

data-bind="attr: { title: $root.t('__name__: ', { name: ko.utils.unwrapObservable(type) }).toUpperCase(), ...}"

that produces for example "SIDEARTICLEBLOCK", but I would like to access the template label instead

[bago]

The not-disappearing tooltip is probably a jquery issue, but I'm not able to find a way to reproduce it (I saw this on IE11 while desperately clicking and hovering around, but I didn't find an easy way to see it, so I can't start trying to fix something if I don't have a good way to easily when it works and when it is broken, sorry. I never saw the tooltip issue on Firefox-Win10 even if it is my second development browser and the main browser of another developer. Are you on 64bit or 32bit? Are you on a touch enabled device? Are you using a simple mouse to point around or something else?

--

At this time the block "label" is a compile-time variable (when mosaico compile the "master template" to its own internal structure). During that phase, the block label is written in the "html templates" (knockout templates) that will be used while editing.

The "block list" is not created this way, but instead a runtime array (blockDef) is passed together with the empty "model" and, in the current code, you can't access the block label at runtime as only the model structure of the blocks is available once you are in the "runtime" phase.

Maybe an option could be to create a "blockListTemplate" in editor.js in a way similar to the way we build the "editors" template (generateEditors function in editor.js uses a "templateCreator" to create templates that will be used at runtime).

The editor.js and createBlockEditors create 2 types of template for each "block type", the "edit" (for the content tab) and the "styler" (for the style tab). One option is to create a third type (e.g: "drag") with the template used to drag that block in the "Block tab" and then change the toolbox.tmpl.html to use that templates instead of the blockDef runtime variable.

But this is very deep in the mosaico architecture, I don't think it worth it just for a label.

BTW, if you are not afraid to get your hands dirty, remeber that the whole block-template inclusion mechanism rely on a "withProperties: { templateMode: 'styler' }" (where "styler" is the kind of template you want for that block, at this time styler/edit/show/wysiwyg (Style Tab, Content Tab, Preview Pane, Main editing page).

[francescogabbrielli]

Thanks for the long answer!

For the short answer, I know is not a big issue, but can be very annoying, especially when the labels accumulate over time. Specifically, I'm not working on it right now, but I will do more tests in the near future.

I am developing on a Windows10 64bit Desktop with a standard USB mouse. The easiest way to reproduce it is to move the pointer around especially over the toolbar buttons causing a lot of "mouseover" and "mouseout" events

[bago]

Are you able to see the issue on Firefox by just moving the mouse on the main toolbar without any clic? I've moved my mouse for almost 5 minutes in my Firefox Win10-64bit and tooltips worked fine.

[francescogabbrielli]

Well honeslty in Firefox is more difficult to reproduce. I admit I saw it on my customized version, especially when opening a new tab or popup. My version also runs a customized CKEditor and other buttons that integrate with the main software. But try this: do some blocks, then try to click on the undo button, just right when its label pops up

[RicardoMaGo]

Browser: Chrome
Framework: Angular 10.1.4
Mosaico Version: 0.17.15

I still have the same problem. When I click on a navigation button in my page and between the moment when the navigation starts (in app navigation), if I have my mouse on one of the blocks, the tooltip appears but as the block has been destroyed between the moment when the tooltip is is displayed and the moment my new page has loaded, the tooltip is never destroyed.

[bago]

When I click on a navigation button in my page

I guess this is a different issue from the one reported because from your description sounds like you are embedding mosaico in an angular application. Mosaico currently expects to run in a full page (or full frame) so when you navigate out from that frame everything in that frame should be disposed by the browser even if mosaico doesn't deal with it.

So maybe this is specific to your integration with angular.

If not, please let us know if this also happens on default mosaico downloaded from github with no changes and started via the default build (grunt).