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 !!!

  • 2
    The title attribute only accepts text, not HTML. So title="{{ node__teaser }}" ain't gonna render the HTML. What you're looking for is called "tooltip". You'll need to use some JS library, ex: https://www.tippedjs.com/
    – No Sssweat
    Jul 9 '20 at 5:53
  • 1
    You can use {{ node__teaser| striptags }} to get the text only of the summary. Jul 9 '20 at 6:02
  • @NoSssweat Thank you. I overcame this in twig by using the " |striptags" option as suggested by Hodba Khalaf but still couldn't figure out a way to do it to meet my question so I ended up solving it nicely in Views as shown in my own answer.
    – Adam888
    Jul 10 '20 at 7:50

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.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.