jQuery and Bootstrap popovers

I had a bit of an issue with the Mage Wars Spellbook Builder I am coding. The application provides a small preview of a card when a user clicks on it. The preview is placed in an accordion panel so that the user can show or hide the preview as they see fit. Sadly the area where the users will be wanting previews is lower in the screen than the preview area

Card preview

I decided to use the popover class in Bootstrap to enable a preview when the user clicked on the card name. There were a few issues.

1) The popover object needs to be initialized prior to display
2) The class is built to use data attributes to display the content in the popover

The first problem was easy to solve but the second was problematic since I didn’t want to have to rebuild the HTML code for the data table to add the HTML code I needed to display the card previews. Part of being a programmer is, in my experience, working for hours to make a task as simple as possible even if that amount of work is more time that it would have been to just do it manually. Its a special type of laziness.

In this instance what the solution requires is for me to add a few data attributes to the code and then add a function to dynamically create the HTML prior to showing the popover. Thankfully the popover has an event that triggers prior to the popover being shown so I can insert the data into the data table for the popover to read.

Problem solved :-)

I’ll update this post with a screen cap of the code at work once I have it integrated into the application. I actually used Bootply to write and test the code. Very handy web app if you are working in Bootstrap.

Advertisements
Tagged , ,