Show node summary (teaser) as tooltip/ Alt/ Title text on hover over nodes titles on front page with Views

Question

I have a custom front page view showing nodes titles only without teasers. I want to have the teaser of each node show when hovering over any title. Something like:

<a href="{{ url }}" title="{{ node__teaser }}"> Node Title </a>

I am thinking I could edit the view to display teasers and I can then control their visibility on hover with css but I am curious to learn any idea to do it otherwise by including the node teaser in the title attribute instead if at all possible via Views or theme's twigs.

---

I'm going to answer my own question but first I'd love to learn from those who down-voted my question their reasons except for again discouraging a newbie here who's done all efforts to research and wrote a clear question. I only ask after I've exhausted all my search and it annoys me and discourage me when my question is unfairly down-voted and it seems this is an exclusive Drupal Answers trend !!!

Answer 1

After lots of digging and trial and errors playing with twig and then Views I made it work exactly as I wanted in my Homepage view as follows:

The view has the following four Content fields in the same order below:

Content:Body [Hidden] (Formatter: Summary or Trimmed)

Content: Link to Content [hidden] ("Output the URL as text" is checked)

Content: Title as follows:

Link to the Content is unchecked,

Formatter: Plain text

Rewrite Rules: Output this field as a custom link selected.

Link path: {{ view_node }}

Title text: {{ body }}

Now whenever one hovers over a node link on front page they get a tooltip with the node summary. The link also links correctly and all as expected.

Please see the attached screenshot for more details.

Content: Authored on (Authored on) .....