rubywatir

Get tooltip title with Watir


I'm trying to find the selector of a tooltip that's not available from the HTML. Specifically, the tooltip that displays the installs count on https://www.figma.com/community/plugins

I can get the tooltip to appear on hover but don't know how to figure out how it's being displayed (JS/CSS?) and how to grab its title.

installs_element = browser.div(class: 'feed_page--pluginInstallCount--Db8kn')
installs_element.hover

I'll appreciate any help on this.


Solution

  • The tooltip text is appearing in the following sibling. However, the element only has text populated when hovered.

    <div class="feed_page--tileTooltip--wHWre dropdown--dropdown--eOf82 text--fontPos14--QJNQC text--_fontBase--VaHfk" show-dropdown="false" tabindex="0" data-disable-repositioning="true" data-hover-dropdown="true">
      <div class="feed_page--pluginInstallCount--Db8kn">
        <svg width="10" height="12" viewBox="0 0 10 12" style="fill: var(--color-text-secondary, rgba(0, 0, 0, 0.8));" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 4.10457 6.10457 5 5 5C3.89543 5 3 4.10457 3 3C3 1.89543 3.89543 1 5 1C6.10457 1 7 1.89543 7 3ZM8 3C8 4.65685 6.65685 6 5 6C3.34315 6 2 4.65685 2 3C2 1.34315 3.34315 0 5 0C6.65685 0 8 1.34315 8 3ZM5 8C7.20914 8 9 9.79086 9 12H10C10 9.23858 7.76142 7 5 7C2.23858 7 0 9.23858 0 12H1C1 9.79086 2.79086 8 5 8Z"></path>
        </svg>
        279k
      </div>
      <div class="dropdown--dropdownContents--BnmiS" data-v-position="below" data-h-position="" data-dropdown-contents="true">
        Used by 279928 people
      </div>
    </div>
    

    You can get the tooltip text using:

    installs_element.following_sibling.text
    #=> "Used by 279935 people"