0

I am trying to make a slds popover, but when I put the cursor on a apex:image nothings happen, this is my code:

<span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="top" title="Up top!">
    <apex:image url="{!$Resource.Conexion}" width="35" height="35"/>
</span>
3
  • do you have any documentation reference where it states that this is supposed to work? – glls Apr 3 '18 at 1:58
  • Hi @glls, this is the web page where I found the popover: aljs.appiphony.com/#!/popovers – Angello Camacho Apr 3 '18 at 3:21
  • @AngelloCamacho There are lots of libraries to include. Did you include those? Please read all the instructions on the website you linked to. – DavidSchach Apr 3 '18 at 17:58
2

Have you included the latest jQuery and the Plugins as mentioned in the Getting Started section? Also, did you initialize the popup plugin as mentioned here.

I followed the same steps with the example given on the site and it is working as below.

VF Page

<apex:page sidebar="false" standardstylesheets="false" showheader="false" doctype="html-5.0">
    <head>
        <title>My Visualforce Page</title>
        <script src="{!URLFOR($Resource.jquery)}"></script>
        <script src="{!URLFOR($Resource.aljs, '/jquery.aljs-all-with-moment.min.js')}"></script>
        <script>
        $(document).ready(function() {
            $('[data-aljs="popover"]').popover();
        });        
        </script>        
        <apex:slds />
    </head>
    <body>
        <br/><br/><br/>
        <div style="width:800px; margin:0 auto;">
            <span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="top" title="Up top!">Top</span>
            <span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="right" title="Right here!">Right</span>
            <span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="bottom" title="Down low!">Bottom</span>
            <span class="slds-show--inline-block slds-p-around--x-small" tabindex="1" data-aljs="popover" data-aljs-placement="left" title="To the left, to the left.">Left</span>        
        </div>
    </body>
</apex:page>

Note: I have added some inline CSS to move the div into the center to capture the tooltips.

enter image description here

0

Slds popover template shown here : https://www.lightningdesignsystem.com/components/popovers/

The flags which open or close the popover msg should be managed using some JS.

Where is your JS function? You should call it on click or hover events as u wish.;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.