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, 2018 at 1:58
  • Hi @glls, this is the web page where I found the popover: aljs.appiphony.com/#!/popovers Apr 3, 2018 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. Apr 3, 2018 at 17:58

2 Answers 2

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.;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .