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