playbook_ui 14.12.0.pre.alpha.PBNTR8335887 → 14.12.0.pre.alpha.PBNTR8335906

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 465ee51ff2dbb2af50cc37ab1410fcc232cd40a299ef118c417233501dc228b4
-  data.tar.gz: d24d893f196fdb17bd2ac9de0c675fe94f75f96ffe22e40fac1b50291175b25a
+  metadata.gz: 8cf75667a14a1b95b256c86ea1eaf7a60a5d7ceaf90cc8c5a46431a53953a38a
+  data.tar.gz: 547d77e91c2b02c0f5f76bbe4b0425b467d2f5a6dedd405b43ab823de2072e79
 SHA512:
-  metadata.gz: 9c93b1222544a679b63d47c822e178f791bc5dc9c62b766d2b56343baab2ae44bb237cc821d70ffa6fe14c35a8b77aa277b17c2da02c0915b7f44764ddddf9d1
-  data.tar.gz: f20faea4116796dde581972cf1e1ab25e60470e4ecbc5fb51b59161f9593bbf17b24b501d4e6f351add749ce87f85d9389d49740cc66055c8cf3c50386f8337f
+  metadata.gz: 72370309aa5412ddfbf7cbc16c1c21b12d01462dd13124b55cbf72f83e5d73e89168bd3e3736adc3770b9f7973de51c7d1a83aef7ca9cc258985eeba09ef7cfb
+  data.tar.gz: 6fa47007e8a6bf5761db259053351149175fb86b0dc1a2cc3bd5be752bf78acc203d1a9ad63db47f0cdefa24da22819330db2918c535e763ee4905d9313de19f

data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss

@@ -1,3 +1,4 @@
 .pb_copy_button_kit {
-
+  width: fit-content;
+  height: fit-content;
 }

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -0,0 +1,15 @@
+<%= pb_content_tag do %>
+    <%= pb_rails("button", props: { icon: "copy" }) do %>
+      <%= object.text %>
+    <% end %>
+  <% if object.id %> 
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "##{object.id}",
+      position: object.tooltip_position,
+      tooltip_id: "#{object.id}_tooltip",
+      trigger_method: "click"
+    }) do %>
+        <%= object.tooltip_text %> 
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCopyButton
+    class CopyButton < ::Playbook::KitBase
+      prop :text
+      prop :tooltip_position,
+           type: Playbook::Props::Enum,
+           values: %w[top right bottom left],
+           default: "top"
+      prop :tooltip_text, type: Playbook::Props::String,
+                          default: "Copied!"
+      prop :value
+      prop :from
+
+      def classname
+        generate_classname("pb_copy_button_kit")
+      end
+
+      def data
+        Hash(values[:data]).merge(
+          "copy-value": value,
+          "from": from
+        )
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/example.yml

@@ -1,8 +1,8 @@
 examples:
-  
+  rails:
+  - copy_button_default: Default
+  - copy_button_from: Copy From
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  
-  

data/app/pb_kits/playbook/pb_copy_button/index.js

@@ -0,0 +1,47 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+export default class PbCopyButton extends PbEnhancedElement {
+  static get selector() {
+    return '.pb_copy_button_kit'
+  }
+
+  connect() {
+    this.handleClick = this.handleClick.bind(this)
+    this.button = this.element.querySelector('button')
+    if (this.button) {
+      this.button.addEventListener('click', this.handleClick)
+    }
+  }
+
+  disconnect() {
+    if (this.button) {
+      this.button.removeEventListener('click', this.handleClick)
+    }
+  }
+
+  handleClick() {
+    const fromId = this.element.getAttribute('data-from')
+    if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      if (fromElement) {
+        let contentToCopy = ''
+        if (fromElement.tagName.toLowerCase() === 'input') {
+          contentToCopy = fromElement.value
+        } else {
+          contentToCopy = fromElement.innerText
+        }
+        navigator.clipboard.writeText(contentToCopy)
+          .catch(err => console.error('Failed to copy text', err))
+        return
+      }
+    }
+
+    const textToCopy = this.element.getAttribute('data-copy-value')
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+        .catch(err => console.error('Failed to copy text', err))
+    } else {
+      console.warn('No data-copy-value attribute found or data-from element')
+    }
+  }
+}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -18,7 +18,6 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  preserveCase?: boolean,
   emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
@@ -44,7 +43,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
-    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -79,8 +77,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
-  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
-
   return (
     <div
         className={classes(className, dark)}
@@ -95,7 +91,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -105,14 +101,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -122,7 +118,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${titleize(city)}, ${state}`}
             </Title>
             <Body
                 color="light"
@@ -136,15 +132,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
+          <Body dark={dark}>{titleize(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml

@@ -5,14 +5,12 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js

@@ -2,4 +2,3 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
-export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -18,7 +18,6 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
-      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -30,7 +29,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state&.upcase].join(", ")
+        [city&.titleize, state].join(", ")
       end
 
       def zip
@@ -38,7 +37,7 @@ module Playbook
       end
 
       def address_house_style
-        [format_street_address, house_style].join(separator)
+        [address&.titleize, house_style].join(separator)
       end
 
       def address_house_style2
@@ -49,14 +48,6 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
-      def format_street_address
-        preserve_case ? address : custom_titleize(address)
-      end
-
-      def custom_titleize(str)
-        str.split(" ").map(&:capitalize).join(" ")
-      end
-
       def city_emphasis_props
         {
           address_house_style: address_house_style,

data/app/pb_kits/playbook/pb_link/_link.tsx

@@ -19,7 +19,9 @@ type LinkProps = {
   icon?: string,
   iconRight?: string,
   id?: string,
+  tabIndex?: number,
   tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  target?: string,
   text?: string,
   underline?: boolean,
 } & GlobalProps
@@ -37,7 +39,9 @@ const Link = (props: LinkProps): React.ReactElement => {
     icon = '',
     iconRight = '',
     id = '',
+    tabIndex,
     tag = 'a',
+    target = '',
     text = '',
     underline = false,
   } = props
@@ -52,6 +56,14 @@ const Link = (props: LinkProps): React.ReactElement => {
   )
   const Tag = tag as keyof JSX.IntrinsicElements
 
+  const getTargetAttribute = () => {
+    if (target && href) {
+      return target
+    }
+
+    return undefined
+  }
+
   const renderContent = () => (
     <>
       {icon && (
@@ -87,6 +99,9 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
+          rel={target !== 'child' ? 'noreferrer' : undefined}
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
       >
         {renderContent()}
       </a>
@@ -96,6 +111,9 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
+          rel={target !== 'child' ? 'noreferrer' : undefined}
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
       >
         <Tag>{renderContent()}</Tag>
       </a>

data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb

@@ -0,0 +1,15 @@
+<div>
+  <%= pb_rails("link", props: {
+    href: "http://google.com",
+    target: "blank",
+    text: "Open In New Window"
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    href: "https://playbook.powerapp.cloud/",
+    target: "child",
+    text: "Open In Child Tab",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkTarget = (props) => (
+  <div>
+    <div>
+      <Link
+          aria={{ label: 'Link to Google in new window' }}
+          href="https://google.com"
+          tabIndex={0}
+          target='blank'
+          text="Open In New Window"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          aria={{ label: 'Link to Playbook in a child tab' }}
+          href="https://playbook.powerapp.cloud/"
+          tabIndex={0}
+          target='child'
+          text="Open In Child Tab"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkTarget

data/app/pb_kits/playbook/pb_link/docs/example.yml

@@ -1,16 +1,18 @@
 examples:
-  
+
   rails:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
-  
-  
+  - link_target: Target
+
+
   react:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
+  - link_target: Target

data/app/pb_kits/playbook/pb_link/docs/index.js

@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
 export { default as LinkUnderline } from './_link_underline.jsx'
 export { default as LinkIcon } from './_link_icon.jsx'
 export { default as LinkDisabled } from './_link_disabled.jsx'
-export { default as LinkTag } from './_link_tag.jsx'
+export { default as LinkTag } from './_link_tag.jsx'
+export { default as LinkTarget } from './_link_target.jsx'

data/app/pb_kits/playbook/pb_link/link.html.erb

@@ -9,7 +9,7 @@
 <% end %>
 
 <% if object.tag == "a" %>
-  <%= pb_content_tag(object.tag, { href: object.href }) do %>
+  <%= pb_content_tag(object.tag, { href: object.href, target: object.target }) do %>
     <%= link_content.call %>
   <% end %>
 <% else %>

data/app/pb_kits/playbook/pb_link/link.rb

@@ -11,9 +11,11 @@ module Playbook
       prop :href
       prop :icon
       prop :icon_right
+      prop :tabindex
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[a h1 h2 h3 h4 h5 h6 p span div],
                  default: "a"
+      prop :target
       prop :text
       prop :underline, type: Playbook::Props::Boolean,
                        default: false
@@ -26,6 +28,10 @@ module Playbook
         text
       end
 
+      def target_attribute
+        target if target && href
+      end
+
     private
 
       def color_class

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -90,3 +90,33 @@ test('adds icon right', () => {
   const icon = kit.querySelector('.pb_icon_kit')
   expect(icon).toBeInTheDocument();
 })
+
+test('should render target prop', () => {
+  render(
+      <Link
+          data={{ testid: 'target-test' }}
+          href="https://playbook.powerapp.cloud/"
+          target="blank"
+      />
+  )
+
+  const kit = screen.getByTestId('target-test')
+
+  expect(kit).toHaveAttribute('target', 'blank')
+})
+
+
+test('should render child target prop', () => {
+  render(
+      <Link
+          data={{ testid: 'target-test' }}
+          href="https://playbook.powerapp.cloud/"
+          tabIndex={0}
+          target="child"
+      />
+  )
+
+  const kit = screen.getByTestId('target-test')
+
+  expect(kit).toHaveAttribute('target', 'child')
+})

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
   step 1
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
   step 2
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
@@ -11,7 +11,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
   step 4
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
   step 5
   <% end %>
 <% end %>
@@ -19,7 +19,7 @@
 <br /><br />
 
 <%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
   <% end %>
@@ -31,10 +31,10 @@
 
 <br /><br>
 <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"  }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
       <%= pb_rails("caption", props:{text: "Ordered"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
@@ -50,7 +50,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
       <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -43,4 +43,4 @@
         Whoa. I'm a tooltip.
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -1,5 +1,4 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-
 import {
   createPopperLite as createPopper,
   flip,
@@ -17,27 +16,34 @@ export default class PbTooltip extends PbEnhancedElement {
 
   connect() {
     this.triggerElements.forEach((trigger) => {
-      trigger.addEventListener('mouseenter', () => {
-        this.mouseenterTimeout = setTimeout(() => {
-          this.showTooltip(trigger)
-          this.checkCloseTooltip(trigger)
-        }, TOOLTIP_TIMEOUT)
+      const method = this.triggerMethod
 
-        trigger.addEventListener('mouseleave', () => {
+      if (method === 'click') {
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
+        })
+      } else {
+        trigger.addEventListener('mouseenter', () => {
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            this.checkCloseTooltip(trigger)
+          }, TOOLTIP_TIMEOUT)
+
+          trigger.addEventListener('mouseleave', () => {
+            clearTimeout(this.mouseenterTimeout)
+            setTimeout(() => {
+              this.hideTooltip()
+            }, 0)
+          }, { once: true })
+        })
+
+        this.tooltip.addEventListener('mouseenter', () => {
           clearTimeout(this.mouseenterTimeout)
-
-          setTimeout(() => {
-            this.hideTooltip()
-          }, 0)
-        }, { once: true })
-      })
-    })
-
-    this.tooltip.addEventListener('mouseenter', () => {
-      clearTimeout(this.mouseenterTimeout)
-    })
-    this.tooltip.addEventListener('mouseleave', () => {
-      this.hideTooltip()
+        })
+        this.tooltip.addEventListener('mouseleave', () => {
+          this.hideTooltip()
+        })
+      }
     })
   }
 
@@ -54,7 +60,7 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
-    if (this.shouldShowTooltip === "false") return
+    if (this.shouldShowTooltip === 'false') return
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
@@ -78,6 +84,13 @@ export default class PbTooltip extends PbEnhancedElement {
       ],
     })
     this.tooltip.classList.add('show')
+
+    if (this.triggerMethod === 'click') {
+      clearTimeout(this.autoHideTimeout)
+      this.autoHideTimeout = setTimeout(() => {
+        this.hideTooltip()
+      }, 1000)
+    }
   }
 
   hideTooltip() {
@@ -94,25 +107,26 @@ export default class PbTooltip extends PbEnhancedElement {
     let triggerEl
 
     if (this.triggerElementId) {
-      triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
+      triggerEl = document.querySelector(`#${this.triggerElementId}`)
     } else {
       const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
-      triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
-        document.querySelectorAll(`${this.triggerElementSelector}`)
+      triggerEl = selectorIsId
+        ? document.querySelector(`${this.triggerElementSelector}`)
+        : document.querySelectorAll(`${this.triggerElementSelector}`)
     }
 
     if (!triggerEl) {
-      /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
       console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
       return []
     }
 
     if (!triggerEl.length) triggerEl = [triggerEl]
-    return this._triggerElements = (this._triggerElements || triggerEl)
+    return (this._triggerElements = this._triggerElements || triggerEl)
   }
 
   get tooltip() {
-    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+    return (this._tooltip =
+      this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
   }
 
   get position() {
@@ -134,4 +148,8 @@ export default class PbTooltip extends PbEnhancedElement {
   get shouldShowTooltip() {
     return this.element.dataset.pbTooltipShowTooltip
   }
+
+  get triggerMethod() {
+    return this.element.dataset.pbTooltipTriggerMethod || 'hover'
+  }
 }