Need help getting App Connect Expressions to work with Tippy

Wappler General How To
1

I’m using Tippy to make some HTML tooltips, since the bootstrap ones don’t support exactly what I need when it comes to HTML support.

I’ve got Tippy working, though app connect expressions don’t work in the tooltips. I’m using Tippy’s innerHTML method to get the HTML content.
image

I’m assuming this is because of the way Tippy hides the div when it isn’t called, but how can I get app connect expressions to work after it’s shown? I’m assuming I need to add something somewhere in the JS file, but I can’t find what I need to add.

I’ve tried dmx.requestUpdate, but that doesn’t seem to do it, even through console.

2

Can you show your current code? It’s more time-efficient to see and adapt your code

For executing expressions dmx.parse() comes to mind, it accepts one string argument which is the expression

3

The code on the Tippy page is pretty much exactly what I have, I just changed a couple of the animations (from Tippy):

image
image936×383 6.92 KB
Just replace the content in the <strong> with an app connect expression.

4

Instead of template.innerHTML use dmx.parse("getIssueData.data.getIssue[0].name")

Would that work for you? Or would the same problem occur?

Regarding your original intent of making App Connect expressions work inside the template div, I’m afraid I don’t have any suggestion yet

5

template.InnerHTML is getting the content within the “template” <div> (where you’d put forms, dropdowns, whatever else you want, etc), so adding dmx.parse there would mean no HTML content.

6

What about using the Dynamic Attributes on your <strong> element inside the template div? Like dmx-text="expression_here"

<strong dmx-text="'hello'"></strong>

You could also use <p> and maybe <span> (not sure if Wappler UI works great with this last one)

7

That didn’t work either, but I managed to get bootstraps default popovers working similarly instead of this library, where it does work.

The only problem I’m having with those are getting the dmx-on:click event to work, but that’s a tomorrow me issue.

8

I managed to get Tippy working, here’s an example:

<p data-tippy-interactive="true" data-tippy-allowhtml="true" dmx-bind:data-tippy-content="'Expression goes here'">Hover me</p>

Create a page flow on your main layout page:

Page flow
Page flow992×1272 43.1 KB

The Wait step is required to workaround a race condition, otherwise it’s unlikely to work

Whenever you change data, you need to re-run that page flow (e.g.: Server Connect Dynamic Event “On Success”)

9

@Digo why doesn’t dmx.parse work?

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
    dmx.Component("jonl_tippy", {
    render: function () {
    tippy('button', {
    content: dmx.parse(template.innerHTML),
    allowHTML: true,
    interactive: true,
    });
    }
    });
</script>

<div id="template" is="dmx-jonl_tippy" style="display: none;">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Button with an {{'AC expression'.uppercase()}} uppercased</button>
</div>

Safari 14-12-2022 12.11.01 000170

10

Unfortunately, this was the problem I had with Tippy that I couldn’t solve. I instead ended up doing a bit of a hack and used bootstrap dropdowns instead which let me do exactly what I wanted, and since I didn’t have to worry about mobile responsiveness, it worked fine for me.

Edit: I see in your example it is working? I can’t remember what I tried exactly since this was a month ago, and I just used the above instead (which also cut down on the amount of libraries used, so it was a win)

1 Like