Link a paper radio button (wrapped div) to a paper radio group?

Question

I can bind several paper-radio-button buttons within a group, indicating that the buttons are direct children of paper-radio-group .

 <paper-radio-group selected="{{someProperty}}"> <paper-radio-button name="foo">Foo</paper-radio-button> <paper-radio-button name="bar">Bar</paper-radio-button> <paper-radio-button name="baz">Baz</paper-radio-button> </paper-radio-group> 

However, if I wrap one of the paper-radio-button with a div like this, it loses touch with the group (so that you can select both the wrapped button and one of the others). This is a problem because I want to give this button a tooltip.

 <paper-radio-group selected="{{someProperty}}"> <paper-radio-button name="foo">Foo</paper-radio-button> <paper-radio-button name="bar">Bar</paper-radio-button> <div> <paper-radio-button name="baz">Baz</paper-radio-button> <paper-tooltip>Tooltip text for baz.</paper-tooltip> </div> </paper-radio-group> 

I tried using the for attribute for the tooltip paper, but this does not make a tooltip only when this particular button freezes.

How can I associate paper-radio-button with paper-radio-group without having a direct child button?

Answer 1

To add tooltips, create an id for each radio unit that needs a tooltip. Then you can use for and refer to id . No need for wrapper div .

 <paper-radio-group> <paper-radio-button id="foo" name="foo">Foo</paper-radio-button> <paper-tooltip for="foo">Tooltip text for foo.</paper-tooltip> <paper-radio-button id="bar" name="bar">Bar</paper-radio-button> <paper-tooltip for="bar">Tooltip text for bar.</paper-tooltip> <paper-radio-button id="baz" name="baz">Baz</paper-radio-button> <paper-tooltip for="baz">Tooltip text for baz.</paper-tooltip> </paper-radio-group> 

You can find a working demo in this plunk .

Answer 2

There are two problems with using div inside paper-radio-group

• paper-radio-group expects the item to be selected is paper-radio-button . This is a simple problem like radio-group has a property named selectable`, which you can overwrite to change this behavior.
• The second and more difficult problem is that paper-radio-group switches the checked property to the element that you select as selectable. One solution I could find for this was to ignore the verified that paper-radio-group installs and adds a crane listener to the entire div to manually switch to the radio-button .

Having said that, this solution will continue to work with the entire direct child of the radio-group , which are different instances of the same HTML element.

 <link rel="import" href="https://polygit.org/components/polymer/polymer.html"> <link rel="import" href="https://polygit.org/components/paper-radio-group/paper-radio-group.html"> <link rel="import" href="https://polygit.org/components/paper-radio-button/paper-radio-button.html"> <dom-module id="group-with-div"> <template> <style></style> <paper-radio-group selectable="div"> <div name="one" data-selected="1" on-tap="changeSelection"> <paper-radio-button id="1">one</paper-radio-button> </div> <div name="two" data-selected="2" on-tap="changeSelection"> <paper-radio-button id="2">two</paper-radio-button> </div> <div name="three" data-selected="3" on-tap="changeSelection"> <paper-radio-button id="3">three</paper-radio-button> </div> </paper-radio-group> </template> </dom-module> <script> Polymer({ is: 'group-with-div', properties: { }, changeSelection: function(e) { for (var i = 1; i <= 3; i++) { //i should be less than number of radio buttons (this code is mainly added to handle dynamically created buttons) if (e.currentTarget.attributes['data-selected'].value == i) { this.$[i].set('checked', true); } else { this.$[i].set('checked', false); } } } }) </script> <group-with-div></group-with-div>