Title attribute for <<button>> macros in Sugarcube?

Question

I'm messing about with a shop interface that uses buttons and I'm wondering how to define the title attribute of the element. It doesn't need to be dynamic - I just want to create hover text, really. Something to give additional feedback to a player as to why they can't buy an item.

Is there a way to do that?

It's probably somewhere in the documentation but I didn't find it after spending some time looking so, well, question time!

Answer 1

You didn't include an example of exactly how you are using the <<button>> macro so I will include examples of both of it's main usages.

1. Using a <<button>> macro to move to another passage, optionally modifying story variables.

<<button "Hello" "Next Passage">>\
	<<set $varA += 10, $varB += 10>>\
<</button>>

 ... in this particular use-case you could use a standard HTML button element combined with HTML Attributes. If you Inspect the HTML generated for the above <<button>> macro you would see something like the following

<button data-passage="Next Passage" class="link-internal macro-button" type="button" tabindex="0">Hello</button>

... so to manually create a Farewell equivalent that includes a title attribute you would do the following.

<button class="link-internal macro-button" data-passage="Next Passage" data-setter="$varA += 10, $varB += 10" title="The Farewell button">Farewell</button>

 

2. Using a <<button>> macro to modify the contents of the current passage.

<<button "Open">>\
	/% code to do something, from setting variables to executing other macros. %/
<</button>>

This particular use-case is a little more difficult because you want to add more complex behaviour and there are currently no HTML Attributes for doing that. I believe this use-case needs to broken down into two sub units:

2a. Uniquely identifying the button element to modify.

As you saw in point 1's second example (of the HTML generated for the macro) the button element does not contain any unique properties, which means you need some other means to do this. One possible solution is to wrap each button element within an uniquely identifying span element.

@@#open;<<button "Open">>\
	/% code to do something, from setting variables to executing other macros. %/
<</button>>@@

@@#close;<<button "Close">>\
	/% code to do something, from setting variables to executing other macros. %/
<</button>>@@

 2b. Using Javascript to add a title attribute to each button element.

You need to wait until after the span & button elements have actually been created (during the Passage rendering process) before you can access and modify them, one way to do this is to use a single-use postrender task function. You can create one of these by adding code like the following to the end of the Passage that contains the above <<button>> macros.

<<script>>
	postrender["Add Button Titles"] = function (content, taskName) {
		delete postrender[taskName]; // single-use task.
		
		var me = $(content);
		me.find("#open button").attr("title", "The Open button");
		me.find("#close button").attr("title", "The Close button");
	};
<</script>>

The above creates the "Add Button Titles" postrender task which deletes itself the first time it is run, the task also finds each of the newly created button elements within the supplied content object and updates their titles. Sometime after this task is executed the HTML structure within the content object will be injected into the current HTML page.

Comments

Hmm, I hadn't considered that I could just use a standard HTML button (I can't say I've used them when writing non-Twine stuff!) but that would solve the problem nicely.

I didn't include any code because the buttons are cosmetic - they don't activate any code at all. The normal buttons are labelled ("buy") and these are variants on that which are deliberately greyed out or similar. I wanted to find a simple way to convey to the player why they were non-functional.

                    /* No buy button */
                    @@.disabledBuyButton;
                    <<button "Buy">>
                    <</button>>
                    @@

I was hoping I could just specify in the macro in some way to create a title attribute but it'll just have to be HTML!

Thanks!