Tool tip on button

  • 1
  • Question
  • Updated 7 months ago
  • Answered
Hi everyone, 

Does anyone have a quick and easy way to add a tool tip to a button?
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
  • HEY HEY .............HEYYYYYY

Posted 8 months ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
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. 
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
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!
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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
Photo of Matt Small

Matt Small

  • 1,182 Points 1k badge 2x thumb
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?
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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="https://upload.wikimedia.org/wikipedia/commons/c/c9/Perspective-Button-Go-icon.png">;
                            <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>