Flip the Card on Hover

Building on the Quick Start example, you can change what causes the card to flip using the triggerEvent option. By default, the flip action is triggered by the click event, but you can change it to flip when the user mouses over the card without clicking.

Note: When the triggerEvent option is set to mouseenter, the card automatically flips back when the cursor moves off the widget. If you want to allow the user to leave the card displaying its backPanel while they use the mouse for other tasks, leave this option in its default setting.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the triggering event to mouse enter.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijflipcard"], function () { $(document).ready(function () { $("#flipcard1").wijflipcard({ triggerEvent: "mouseenter" }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijflipcard"], function () {
    $(document).ready(function () {
        $("#flipcard1").wijflipcard({ triggerEvent: "mouseenter" });
    });
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Hover your mouse over the card to flip it, and move it away from the card to flip it back.

Widgets

Reference

Concepts