Mouseover on Portal buttons

[Sam Ogden]

Hi all,

I'm wondering how you would go about adding pop-up menus when you hover over one of the buttons below on the service portal?

Ideally I would want to be able to have a list of example requests when you hover over the submit request button and something similar on the other buttons

Any help is greatly appreciated.

[nathanfirth]

Take a look at the Bootstrap "popover" feature: https://getbootstrap.com/docs/3.3/javascript/#popovers

[paulinabednarik]

Thank you Nathan for quick help!

[johansec]

Bootstrap modal on hover.

1. Make sure your client controller includes $uibModal
   1. Example: function($scope, $rootScope,$timeout, $uibModal, spUtil, $document)
2. Create a function to open the modal ( This function will be called on ng-mouseover of =whatever you want to open the modal )

          // Function that will open the modal

                c.openMenu= function() {

                      // How to open the modal

                        c.menuInstance= $uibModal.open({

                                        // This template is specified at the end of your html (Will show later)

                                        templateUrl: 'menuTemplate,

                                        size : 'lg',

                                        scope: $scope

                                });

        3.     Create a function to close the modal if you want

        // This is how to close the modal on whatever even you would like   ( ng-mouseleave or on button click)

        c.closeMenu= function() {

                  c.menuInstance.close();

        };

        4. In your html you have to create a template ( This is what shows up in the modal)

//************HTML****************** */

// UNDER THE LAST DIV In your html add a script html template for bootstrap to use

// Make sure id matches the template url in your client controller

<script>

<style>

</style>

<div class="panel panel-default">

              <div class="modal-header">

                      <button type="button" class="close" ng-click="c.closeMenu()">&times;</button>

                      <h4 class="modal-title">Modal Header</h4>

              </div>

              <div class="panel-body wrapper-xl">

                      <h3> IN A MODAL YAY! </h3>

              </div>

</div>

</script>

Hopefully this helps at all

[johansec]

This is what I had to do with an i button

Is there a widget already built to show a record. Something like the "i" icon does on a reference fi...

[paulinabednarik]

Thanks Corey I'll give a go then! Thanks again