Associating a paper-radio-button (wrapped by a div) with a paper-radio-group?

Question

I can associate multiple paper-radio-buttons within a group by having the buttons be direct children of a 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-buttons with a div like this, it loses association with the group (so one could select both that wrapped button and one of the others). This is a problem because I want to give that 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 of paper-tooltip, but that doesn't make the tooltip only appear when that specific button is hovered over.

How could I associate a paper-radio-button with a paper-radio-group without having the button be a direct child?

Answer 1

To add tooltips create an id for each radiobutton that needs a tooltip. You can then use for and refer to the id. There is no need for a 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

1. Paper-radio-group expects selectable element to be a paper-radio-button. This is a simple problem as radio-group has a property namedselectable` which you can overwrite to change this behavior.
2. Second and more complicated issue is that paper-radio-group toggles checked property on the element that you choose as selectable. One solution i was able to find for this was to ignore the checked that paper-radio-group sets and add a tap listener on all the div's to toggle in radio-buttons manually.

Having said that this solution will still work with all the direct child of radio-group being different instances of 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>