Question

I’m working specifically with the PowerTools extensions for Tridion 2011, but this applies to any Anguilla extension with buttons in the dashboard.

We can set <ext:title> to get a hover-over tooltip. User hovers over the GUI extension button to see this text. See example for the “count items” extension in the config.

<ext:extension assignid="CountItems" name="Count Items" 
               pageid="Power Tools" groupid="Tools">
    <ext:command>PT_CountItems</ext:command>
    <ext:title>Count Items</ext:title>
    <ext:issmallbutton>false</ext:issmallbutton>
    <ext:dependencies>
        <cfg:dependency>PowerTools.Commands</cfg:dependency>
    </ext:dependencies>
    <ext:apply>
        <ext:view name="DashboardView" />
    </ext:apply>
</ext:extension>

We have a request to change this tooltip to some helpful text when the extension is not enabled.

I can see the “Count Items” text within the button with Chrome’s console.

<div id="CountItems" class="tridion button PT_CountItems ribbonitem disabled"
     title="Count Items" c:command="PT_CountItems" 
     c:controltype="Tridion.Controls.RibbonButton" 
     style="-webkit-user-select: none; ">
    <div class="image">&nbsp;</div>
    <div class="text">Count Items</div>
</div>

Also in the console, I can select div surrounding the text with: $("div#CountItems > div.text"). I’m not sure how to get the text.

Question:
How do/should I change the tooltip text when a GUI button is inactive?

I probably need clarification on these as well.

• In Anguilla (or PowerTools), is the $() the same as jQuery()? I tried $("div#CountItems > div.text").text() and get Object #<HTMLDivElement> has no method 'text'
• Is there a preferred or configurable way to set that tooltip when the button is disabled? I’m sure we can find an element in the DOM, but I’m probably missing something.

And finally,

• Would {NameSpace}.Commands.{ExtensionName}.prototype.isValidSelection = function(selection)
{ } be the right place to change this tooltip in general?
• For context-menus, I believe we have _isAvailable instead.

Answer 1

Is the $() the same as jQuery()?

No. The Tridion UI includes a subset of jQuery library: the sizzle CSS selector engine.

So all the usual jQuery tricks to select a set of elements will work, but other jQuery methods (AJAX stuff, event handlers, utility methods) will not be available.

Note that if you would like to use the full jQuery in your extension, you can do so by including it in so-called noConflict mode.

Can I set a tooltip for when the button is disabled?

As far as I know buttons in the Tridion GUI only have a single tooltip and that tooltip is displayed for every button state. There is also no ontooltip event that you can hook into to calculate the tooltip when the GUI is about to display it.

Buttons do have a public setTooltip, so you could change it yourself once you detect a certain condition. If you search the Anguilla source code for setTooltip you will find some examples of how this is used (in the Welcome screen, when adding Component Presentations to a Page and in the BluePrint viewer).

Is isValidSelection the right place to change this tooltip?

Instead of asking “can I change the tooltip when it is displayed?”, try rephrasing it to “which state leads to which tooltip? Can I detect the state change and set the correct tooltip at that time?”.

If your tool/command is only enabled when items of a certain type are selected, you should detect that condition and then set the tooltip at that time. Then when the GUI needs to display you tooltip, you won’t have to do anything.

Of course this just pushes you problem somewhere else: how to detect this-or-that condition. But you’ll find it is often easier to find an event for such “application state changes” than it is for “ontooltip”.