Inconsistent behaviour with internal links

Wappler General Bugs
,
#1

NodeJS

Expected behaviour:

  1. I click on a menu item (internal link) in the navigation (on layout)

  2. It loads the content page

  3. It changes the ‘title’ meta tag to whatever I put, for example:
    dmx-bind:title="'Admin - Students overview'"

  4. :x: It works for one link, but not the other.

I expect the tab title to become ‘Admin - Students overview’ when clicking on the ‘overview’ button:

2022.06.13 15.56 - 4447 - Aracari

How to reproduce / details

This is the HTML of the link that does NOT change the title:

<a class="menu-link" href="/manage/students/overview" title="An overview of your students" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss="click" data-bs-placement="right" internal dmx-bind:title="'Admin - Students overview'" dmx-class:active="browser1.location.pathname.startsWith('/manage/students/overview')">

This is the link that DOES change the title:

<a class="menu-link" href="/manage/students/email/automations" internal dmx-bind:title="'Admin - Email automations'" dmx-class:active="browser1.location.pathname.startsWith('/manage/students/email/automation')">

What I noticed is that on the rendered page. The HTML becomes:

<a class="menu-link active" title="" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss="click" data-bs-placement="right" is="dmx-link" href="/manage/students/overview" data-bs-original-title="Admin - Students overview">

Note the data-bs-original-title="Admin - Students overview"

It’s creating a new HTML tag…

Also, the dmx-bind:title="" is overwriting the title="" wjich bootstrap is using for the text of the tooltip. I’d like to differentiate between these 2…

For example, I want the tooltip to be “An overview of your students” and the Page title to be “Admin - Students overview”.

#2

This controls the title attribute of the element it’s applied to, not the page title or any meta tag. In your case this controls the title of the <a> element.

#3

This does work for the other link though.
I got this from the forum.

could it be that the ‘title attribute’ is being used for your logic to set the EJS title var? But also being used for the regular title attribute?

Here the original post from George: Server Side Title Not Rendering in NodeJS SPA

1 Like
#4

It is the bootstrap tooltip that also uses the title attribute and removes it from the element

#5

Ah I see… is there a way to use both the bootstrap tooltip AND the wappler title attribute?

#6

They will not work together on the same element, but you could just place a extra span and add the tooltip on that.

1 Like
#7

Thanks Patrick, seems to work.

For anyone finding this later: I wrapped my <a></a> in a span, and put the tooltip stuff in there:

<span title="An overview of your students" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss="click" data-bs-placement="right">
  <a class="menu-link" href="/manage/students/overview" internal dmx-bind:title="'Admin - Students overview'" > Overview
  </a>
</span>
2 Likes