Revamp rails tooltip id methodology, update doc ex

playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -25,15 +25,17 @@
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
       tabindex: 0,
       truncate: 1,
+      id: "truncation-1"
   }) %>
   <%= pb_rails("form_pill", props: {
       icon: "badge-check",
       text: "icon and a very long tag to show truncation",
       tabindex: 0,
       truncate: 1,
+      id: "truncation-2"
   }) %>
   <%= pb_rails("form_pill", props: {
-      text: "form pill with a very long tag to show truncation",
+      text: "form pill long tag no tooltip show truncation",
       tabindex: 0,
       truncate: 1,
   }) %>

playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -0,0 +1 @@
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,19 +1,18 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <% element_id = "pill_#{object.name.parameterize}" %>
     <div>
       <%= pb_rails("title", props: { 
         classname: "pb_form_pill_text #{object.truncate ? "truncate_#{object.truncate}" : ""}",
-        id: element_id,
+        id: object.id,
         size: 4, 
         text: object.name,
       }) %>
-      <% if object.truncate %>
+      <% if object.truncate && object.id.present? %>
         <%= pb_rails("tooltip", props: {
           position: "top",
-          tooltip_id: "tooltip-#{element_id}",
-          trigger_element_selector: "##{element_id}"
+          tooltip_id: "tooltip-#{object.id}",
+          trigger_element_selector: "##{object.id}"
         }) do %>
           <%= object.name %>
         <% end %>
@@ -26,19 +25,18 @@
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
-    <% element_id = "pill_#{object.text.parameterize}" %>
     <div>
       <%= pb_rails("title", props: { 
         classname: "pb_form_pill_tag #{object.truncate ? "truncate_#{object.truncate}" : ""}",
-        id: element_id,
+        id: object.id,
         size: 4, 
         text: object.text
       }) %>
-      <% if object.truncate %>
+      <% if object.truncate && object.id.present? %>
         <%= pb_rails("tooltip", props: {
           position: "top",
-          tooltip_id: "tooltip-#{element_id}",
-          trigger_element_selector: "##{element_id}"
+          tooltip_id: "tooltip-#{object.id}",
+          trigger_element_selector: "##{object.id}"
         }) do %>
           <%= object.text %>
         <% end %>

playbook/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -16,6 +16,8 @@ class FormPill < Playbook::KitBase
                    default: "primary"
       prop :tabindex
       prop :icon
+      prop :id, type: Playbook::Props::String,
+                default: ""
 
       def classname
         generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)