Can advanced tooltops be applied to HTML templates

[Andre601]

I've noticed that the content.tooltips don't get applied to HTML templates or pages in general that use a different template via template meta.

My website uses a frontpage.html template containing the following:

Details

{% extends "main.html" %}
{% block tabs %}
  {{ super() }}
  <style>
    .md-header {
      position: initial;
    }
    .md-main__inner {
      margin: 0;
    }
    .md-content {
      display: none;
    }
    @media screen and (min-width:60em){
      .md-sidebar--secondary {
        display: none;
      }
    }
    @media screen and (min-width:76.25em){
      .md-sidebar--primary{
        display: none;
      }
    }
    .md-tabs {
      display: none;
    }
  </style>
  <section class="mdx-container">
    <div class="md-grid md-typeset">
      <header class="mdx-hero">
        <img src="{{ config.site_url | url }}/assets/img/favicons/android-chrome-512x512.png" alt="" width="200" height="200" draggable="false">
        <p class="mdx-description">
            Personal Website of Andre_601
        </p>
          <a href="https://discord.gg/6dazXp6" title="Join my Discord Server" target="_blank" rel="nofollow" class="md-button md-button__social md-button__social--discord">
            <span class="twemoji">
                {% include ".icons/simple/discord.svg" %}
            </span>
          </a>
          <a href="" target="_blank" title="Join my Revolt Server" rel="nofollow" class="md-button md-button__social md-button__social--revolt">
            <span class="twemoji">
              {% include ".icons/simple/revoltdotchat.svg" %}
            </span>
          </a>
          <a href="https://blobfox.coffee/@andre_601" title="Follow me on Mastodon" target="_blank" rel="me" class="md-button md-button__social md-button__social--mastodon">
            <span class="twemoji">
                {% include ".icons/simple/mastodon.svg" %}
            </span>
          </a>
          <a href="https://bsky.app/profile/andre601.ch" title="Follow me on Bluesky" target="_blank" rel="me" class="md-button md-button__social md-button__social--bluesky">
            <span class="twemoji">
              {% include ".icons/simple/bluesky.svg" %}
            </span>
          </a>
        <p>
      </header>
      <div class="mdx-description">
        {{ page.content }}
      </div>
    </div>
  </section>
{% endblock %}

{% block content %}{% endblock %}

{% block footer %}
  {{ super() }}
{% endblock %}

I would like to apply the advanced tooltips to it. Is there a way to do this?

[kamilkrzyskow]

Hey @Andre601,
after doing a quick search I see that content.tooltips is applied when mounting content (separate for code blocks) and header.

After looking at how the content is mounted I saw it relies on the component value in the attribute.

So I would suggest adding data-md-component="content" to your section HTML tag, similar to how it's done in base.html:

• mkdocs-material/src/templates/base.html

  Line 338 in 44c3b56

  <div class="md-content" data-md-component="content">

As for your example the <style> tag contains different styles than your section, and mdx- classes are only available in the custom.css file, they're not shipped with the main.css file.

[Andre601]

The styling isn't the issue here, as I do have the site working for me:

I was just asking about the tooltip thing.

[Andre601]

Also, the change you suggested works. Thanks.