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.
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"