Turning off tooltip mouseover for a selected widget or GUI

Does anyone know how to turn off a tooltip mouseover for a ‘selected’ widget/gui?

I’m displaying a set of icons on a page where each one of them represents a specific topic. Although the icons are extremely clear to users as to what they represent, I’ve created a mouseover tooltip on each of these icons showing its topic name just to help users identify them further. These mouseovers also provide a visual feedback to users letting them know that each of these icons are clickable. In their default state, the first icon is already selected and right below the icons is a display of summary info for that selected topic. At the bottom right of that displayed summary info is a chevron icon which takes users to its full info page when they click on it.

Even though users know how to go to the full info page (through the chevron icon), they still keep on clicking on the already ‘selected’ icon above assuming that it will ‘also’ take them to the full info page. I believe the reason why they do that is because they notice the cursor still turns into a ‘hand doing a selection type of action’ on mouseover. Hence I want to turn off all mouseover behaviours on any icon, if, and only if it’s already selected.

Thank you!

I’d imagine you could bring an empty shape to front to cover the object with the hover state.

If so, each option could have its own blank shape under it that’s brought to front OnClick. That would also have to send every other other one to back.

So you wouldn’t be “disabling”… more like hiding that functionality.

If you aren’t against using some JavaScript, you can dynamically add a CSS rule to override the cursor.

In the attached example I’m using the default “Box 1” style. You can create a custom style if you wish if you want the limit the impact. You’ll see when the page loads you get the hand because you can click to select the rectangle. Once you select it, you’ll notice the hand icon no longer appears and you just get the regular arrow.

The general gist is that you fire a little bit of JS onload that appends the style. To replicate, click on the page in the outline or a blankspace in the canvas to access the OnPageLoad event for the page. Select “Open Link” and then choose the option for “Link to an External URL or file”. Click the “fX” button to the right and put the following text in:

var sheet = document.styleSheets[0];
sheet.insertRule(".box_1 .selected {cursor: default !important;}",0);
throw new Error();

the first line indicate we’re running some JS and the 2nd line grabs whatever the first stylesheet is in the document and creates a variable for it… nothing to worry about here…

The 3rd line inserts a rule into that stylesheet… in this case it says everything that has class “box_1” and also class “selected”, make the cursor the default cursor. I had to add the !important piece because of the way that Axure dynamically changes the cursor. If you want to use your own custom style just make sure that you change the “.box_1” to whatever you want to use. Note that the name should be all lowercase and the spaces in the name replaced with “_”.

So if you had “Rods Custom Style” as the selected style in the UI, you’d put
.rods_custom_style .selected in place of the .box_1 .selected in my code.

The last line closes out the jS - nothing to worry about here…

Holler if you have any questions…

cursorOverride.rp (45.0 KB)

Thank you @jlhelmers and @UXProtoTyper for your replies! Much appreciated.