Hi everyone,
Does anyone have a quick and easy way to add a tool tip to a button?
Matt,
If this works for your use case, you can declaratively add an ‘Enable’ condition to your button. While the button is ‘disabled’, the button will display a tool tip with any text that you add.
If not, you’ll need some JavaScript to add a ‘title’ attribute to the button.
Thanks,
Bill
Hi Bill,
I will need the second option with the JavaScript. Any ideas on how to add the title?
I have tried a few tutorials on the net but still no success.
Matt,
Here is a sample page that shows how to do this.
Thanks,
Bill
<b><skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
</b><b> <models/>
</b><b> <components>
</b><b> <buttonset uniqueid="sk-132n-208" position="left">
</b><b> <buttons>
</b><b> <button type="multi" label="Button" uniqueid="sk-132n-214" cssclass="tooltip">
</b><b> <actions/>
</b><b> <hotkeys/>
</b><b> <renderconditions logictype="and"/>
</b><b> <enableconditions/>
</b><b> </button>
</b><b> </buttons>
</b><b> </buttonset>
</b><b> </components>
</b><b> <resources>
</b><b> <labels/>
</b><b> <javascript>
</b><b> <jsitem location="inline" name="addTooltip" cachelocation="false" url="">(function(skuid){
</b><b>var $ = skuid.$;
</b><b>$(document.body).one('pageload',function(){
</b><b>$("#sk-132n-214").attr("title", "This is my message");
</b><b>});
</b><b>})(skuid);</jsitem>
</b><b> </javascript>
</b><b> <css/>
</b><b> <actionsequences/>
</b><b> </resources>
</b><b> <styles>
</b><b> <styleitem type="background" bgtype="none"/>
</b><b> </styles></b><b>
</b><b></skuidpage></b>
Thanks bill.
I seem to be able to get this to work on a test page but not on the page im currently building out.
Can you take a look. It is like something is blocking the tool tips from showing?
User models.loaded {{sentia_vda__No_Prospects_Added_per_Week__c}}/5 {{sentia_vda__Opportunities_added_per_Week__c}}/5 ROUND({{sentia_vda__Opportunities_Closed_per_Week__c}}/5) MenuModel MenuModel MenuModel MenuModel &nbsMatt,
Try changing your Inline Snippet to this:
(function(skuid){
var $ = skuid.$;
$(document.body).one(‘pageload’,function(){
$(“#sk-3kTGuB-409”).attr(“title”, “Home”);
$(“#sk-3kTGuB-410”).attr(“title”, “CRM”);
$(“#sk-3kTGuB-411”).attr(“title”, “Performance”);
$(“#sk-3kTGuB-412”).attr(“title”, “Settings”);
});
})(skuid);
Thanks,
Bill
Hi Bill,
Just gave this a go and sill no success =(
Any other suggestions?
Matt,
This is strange. Either the selector is not finding the button or you have some style that is ‘masking’ the tool tip (seems unlikely).
I think you should try installing the page that I posted. See if the tool tip works on this ‘minimal’ page. Then I would clone your current page and start removing things one by one until you have nothing but the button set and the Inline JavaScript to set the tool tip. Somewhere along the way you should be able to identify the source of the problem.
Thanks,
Bill
Finally got it work Bill!
I ended up remaking the Skuid page and it worked just fine. I tried what you suggested with the process of elimination however there was no indication of anything stopping the tool tip from not rendering. A true mystery!
Anyway I guess the lesson here is, “If in doubt, make a new page and see what happens.”
Many thanks!
Matt,
Nice work!
It must have been something small in the page XML. I agree with your suggestion to start with a clean page.
Thanks,
Bill
Hi Bill,
I think I found an issue with your solution. It seems that the snippet wont work on anything within a responsive grid.
I tried this with some images that I am using as buttons,
Do you know why this would be the case?
Matt,
I would check your jQuery selector…maybe it is not finding the HTML element? Would you share the setup of your image and the script line you are using to target the image.
Here is the sample page with a responsive grid and and image ‘button’ (note I am using the Image component). Everything is working in my developer org.
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
<models>
<model id="Tasks" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Task">
<fields>
<field id="OwnerId"/>
<field id="Owner.Name"/>
<field id="ActivityDate"/>
<field id="WhoId"/>
<field id="Who.Name"/>
<field id="WhatId"/>
<field id="What.Name"/>
<field id="Subject"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<grid uniqueid="sk-MAO-250">
<divisions>
<division behavior="flex" minwidth="100px" ratio="1">
<components>
<buttonset uniqueid="sk-132n-208" position="left">
<buttons>
<button type="multi" label="Button" uniqueid="sk-132n-214" cssclass="tooltip">
<actions/>
<hotkeys/>
<renderconditions logictype="and"/>
<enableconditions/>
</button>
<button type="multi" label="Button 2" uniqueid="sk-1BPi-210">
<actions/>
</button>
<button type="multi" label="Button 3" uniqueid="sk-1BQS-249">
<hotkeys/>
</button>
</buttons>
</buttonset>
</components>
</division>
<division behavior="fit" verticalalign="top">
<components>
<image source="url" uniqueid="sk-MAO-279" datasource="salesforce" behavior="button" model="Tasks" url="<a href="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png">" title="Link: https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png">">https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png"></a>;
<styles>
<styleitem type="itemsize" width="custom">
<styles>
<styleitem property="width" value="100px"/>
</styles>
</styleitem>
<styleitem type="border"/>
</styles>
<interactions/>
</image>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
<components/>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
<skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Tasks" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-1BQF-287">
<fields>
<field id="OwnerId" uniqueid="sk-1BQF-292"/>
<field id="Owner.Name" uniqueid="sk-1BQF-295"/>
<field id="ActivityDate" uniqueid="sk-1BQF-298"/>
<field id="WhoId" uniqueid="sk-1BQF-301"/>
<field id="Who.Name" uniqueid="sk-1BQF-304"/>
<field id="WhatId" uniqueid="sk-1BQF-307"/>
<field id="What.Name" uniqueid="sk-1BQF-310"/>
<field id="Subject" uniqueid="sk-1BQF-313"/>
</fields>
<rowactions>
<action type="edit"/>
<action type="delete"/>
</rowactions>
<massactions usefirstitemasdefault="true">
<action type="massupdate"/>
<action type="massdelete"/>
</massactions>
<views>
<view type="standard"/>
</views>
</skootable>
</components>
<resources>
<labels/>
<javascript>
<jsitem location="inline" name="addTooltip" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
$("#sk-132n-214").attr("title", "This is my message");
$("#sk-1BPi-210").attr("title", "This is button 2");
$("#sk-1BQS-249").attr("title", "This is button 3");
$("#sk-MAO-279").attr("title", "This is the image button");
});
})(skuid);</jsitem>
</javascript>
<css/>
<actionsequences uniqueid="sk-1BQF-242"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
