Complex Popovers Possible?

[dserber]

Is there a way to build popovers with containers, rows, columns, forms, images etc.? I see the “allow html” option on the popover properties but I don’t understand where to build out the html.

Thanks!

[brad]

Probably the easiest way would be to build out your HTML as a Wappler page and then copy and paste the code in the Popover UI.

[max_gb]

Yes, I have popovers on one of my tables. Here’s a snippet:

<td data-toggle="popover" title="Primary Contact" data-content="This is the primary contact for this account." > John Smith </td>

Here’s the official documentation: https://getbootstrap.com/docs/4.0/components/popovers/

[dserber]

Hmmm. I built it out on a separate page and added it the the “content” field in the Popover properties. It makes me open and close the code with a single quote. It doesn’t appear to be working, however.

Here’s the code:

    <p class="m-0 small text-left"
			dmx-bs-popover="'<div class=&quot;container&quot;> 		<div class=&quot;row&quot;> 			<div class=&quot;d-flex&quot;> 				<img width=&quot;50&quot; src=&quot;assets/avatars/avatar-6.jpg&quot;> 				<p class=&quot;ml-2&quot;>Stephanie</p> 			</div> 		</div> 	</div>'"
			data-html dmx-bind:popover-title="'Popover Test'" data-placement="auto" data-trigger="focus">All</p>

[dserber]

I have been able to add an image and name by manually adding the following code:

    <p class="m-0 small text-left" data-toggle="popover" title="Folowing" data-html="true" data-content="<img src='http://penguin.linux.test:8100/assets/avatars/avatar-6.jpg' width='40' <p>John Doe</p>"> All </p>

Now, I’m wondering how I would include a repeat/table.

For context, I’m trying to reproduce something I saw on Product Hunt’s website. Here’s a video: .

[brad]

Sounds like you are better off using a modal

[dserber]

Unfortunately, it’s already inside of a modal so it would have to be a modal on top of a modal.

[max_gb]

Yes you can do this. Create your table and copy the code. Add the data-html="true" tag (again see the docs - https://getbootstrap.com/docs/4.0/components/popovers/#options) and then simply paste the code in to the data-content="<div> HTML goes here</div>" tag

[dserber]

I’m making progress.

I’m pretty sure there is at least one bug in the “allow html” checkbox option. It creates data-html in the code but doesn’t set it to “true”. Also, pasting something in the popover properties “content” input creates this code:

dmx-bs-popover not data-content

[dserber]

Have you been able to add dynamic data to the table inside of the popover?

[dserber]

I was able to get this to work using custom code. I’m not sure how it could be made to work through Wappler, but I’d be interested to know.

<p data-toggle="popover">fire popover</p>

<!-- loaded popover content -->
	<div id="popover-content" style="display: none">
		<ul class="list-group custom-popover" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.getusers">
			<li class="list-group-item">{{username}} {{avatar_name}}</li>
		</ul>
	</div>

	    <script>
    		$(document).ready(function() {
      $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
          return $('#popover-content').html();
        }
      });
    });
    	</script>

Here’s how it looks: