Dynamic Tooltips/Popovers

Wappler General
21

Just tested and following Teodor’s advice

Description+'<HTML-HERE>'+FundingSource

does indeed work perfectly with the Allow HTML option checked.

1 Like
22

Adding the HTML to the expression worked wonderfully. However, in the end I merged the description and funding column data into one column with HTML. The reason I took that extra step was so that I had more flexibility in the content. Adding it to the expression limited me to that exact structure of information while adding the HTML to the actual data instead gave me more flexibility on the content.

Wappler is fun! It’s a good Wappler day for me.

1 Like
23

Trying to use tooltips in form fields. Am I correct in my conclusion that they will not work for Summernote textareas?

24

You cannot use tooltips in summernote.

25

Noted, thanks

26

@Teodor Any advice how to show repeat element in popover?

<td class="wills-policy-content d-flex justify-content-between align-items-center gap-2">
	<span dmx-text="name"></span>
	<i class="bi bi-people-fill text-info" dmx-show="beneficiaries.count()&gt;0" dmx-bind:popover-title="'Beneficiaries and distribution'" data-bs-placement="top" data-bs-html="true" dmx-bs-popover="'&lt;div dmx-repeat:repeat1=&quot;beneficiaries&quot;&gt;        &lt;p&gt;{{fullName}}&lt;/p&gt;    &lt;/div&gt;'"></i>
</td>

Looks like a valid code, but doesn't work.

27

Try

dmx-bs-popover="'Beneficiaries:<br>'+beneficiaries.join('fullName','<br>')"
28

image
image841×424 26.5 KB

I tried

dmx-bs-popover="beneficiaries.values('fullName')+' '+beneficiaries.values('distribution')+'%'"

but it not what I want to achieve.
I've tried to combine your solution with join with mine and I believe join is not working properly.

29

Can you share an example of the JSON data structure for beneficiaries?

30 
"beneficiaries": [
	{
		"id": 3,
		"userWillPolicyID": 3,
		"fullName": "Emma Catherine Williams",
		"distribution": 50
	},
	{
		"id": 4,
		"userWillPolicyID": 3,
		"fullName": "James Alexander Thompson",
		"distribution": 30
	},
	{
		"id": 5,
		"userWillPolicyID": 3,
		"fullName": "Olivia Grace Martinez",
		"distribution": 20
	}
]
31

Try:

beneficiaries.values('fullName+\' \'+distribution+\'%\'').join('<br>')

image

2 Likes
32

Much appreciate! Worked like a charm.

1 Like