Tooltip/ hover not rendering correctly in template file

Hi all! So, I have a student’s name showing up, and when you hover over it, I want a dropdown to appear, showing 3 clickable options right below (account, settings, logout). I am trying to build this functionality by making those 3 options show up as tooltips. Here are all the components right now, currently 3 options are rendering normally under the student’s name, not on hover.

        <div class="x-ContentWrapper--right">
          <%= menu :ul, verticalRight: true do %>
            <%= if Pow.Plug.current_user(@conn) != nil do %>
              <%= menu_item :li, [] do %>
                <%= link to: "#", class: "IconLink IconLink--iconLeft" do %>
                  <i data-feather="user"></i>
                  <%= @student_name %>
                <% end %>
              <% end %>
              <%= menu_item :li, [] do %>
                <%= link gettext("Settings"), to: Routes.pow_registration_path(@conn, :edit) %>
              <% end %>
              <%= menu_item :li, [] do %>
                <%= link gettext("Log Out"), to: Routes.pow_session_path(@conn, :delete), method: :delete %>
              <% end %>
            <% end %>
          <% end %>
        </div>

I’ve tried even just placing a regular tooltip like so:

<%= link to: "#", class: "IconLink IconLink--iconLeft", "data-tooltip": "I am tooltip text", "data-placement": "left" do %>

but nothing is working to get any tooltip to show. How can I get these components to only show up when the user hovers over the name?

Thanks in advance for any guidance!

Hello and welcome,

It’s related to webpack and your css framework… I do not even recognize, is that Material Design?

You’ll be more lucky if You show your app.js

I have code for a hover to highlight a clickable element, and a dropdown on a click event, with a modal appearing after clicking on a dropdown menu item, but I don’t have a clickable tooltip based menu code

1 Like

I see, thanks! Here is what my app.js looks like:

import 'phoenix_html'
import {DateTime} from 'luxon'
import feather from 'feather-icons'
import {
  initializeAccordianComponents,
  initializeDrawerComponents, initializeExpandingColumnComponents,
  initializeFlashComponents, initializeModalComponents, initializeSliderComponents,
} from 'harmonium/src/vanilla/harmonium'
import LiveSocket from 'phoenix_live_view'
import {Socket} from 'phoenix'


/**
 * Updates <time> tags with a datetime attribute in ISO 8601 format to
 * display in the user's local time
 * @returns {void}
 */
function updateTimeTags() {
  const timeTags = document.querySelectorAll('time[datetime]')

  for (let i = 0; i < timeTags.length; i++) {
    const timeTag = timeTags[i]

    const timestamp = DateTime.fromISO(timeTag.getAttribute('datetime'), {
      zone: 'utc',
    })

    const localTimestamp = timestamp.toLocal()

    timeTag.textContent = localTimestamp.toLocaleString(DateTime.DATETIME_FULL)
  }
}

function setupLiveView() {
  const csrfTokenHeader = document.querySelector("meta[name='csrf-token']")
  if (csrfTokenHeader) {
    const csrfToken = csrfTokenHeader.getAttribute('content')
    const liveSocket = new LiveSocket('/live', Socket, {
      params: {_csrf_token: csrfToken},
    })

    // connect if there are any LiveViews on the page
    liveSocket.connect()

    // expose liveSocket on window for web console debug logs and latency simulation:
    // >> liveSocket.enableDebug()
    // >> liveSocket.enableLatencySim(1000)
    window.liveSocket = liveSocket
  }
}

function init(_config) {
  initializeFlashComponents()
  initializeAccordianComponents()
  initializeModalComponents()
  initializeDrawerComponents()
  initializeSliderComponents()
  initializeExpandingColumnComponents()
  updateTimeTags()
  feather.replace()
  setupLiveView()
}

document.addEventListener('DOMContentLoaded', () => {
  init()
})

export default {
  init,
}

I am using a framework that my job created called Harmonium, but it doesn’t have a component that could work for this case, so I am trying to just use regular CSS to implement this hover functionality. I am new to elixir and thought the “data-tooltip” was a Phoenix thing, could be wrong though…

I think it’s title, not data-tooltip

Ah, thanks anyway, I’m wondering if the dropdown on a click event could maybe point me in the right direction…

Ah, that’s correct, it shows up with title. Is it possible to list 3 elements one under another as the title of one component though?

Probably not…

What You describe is a dropdown, not a tooltip.

And this highly depends on the css framework (and js)

1 Like

If you want to show on click, then you can use simple Phoenix event handlers + phx-click on the student’s name. To show on hover, I think you might have to write a JS hook for the name which makes use of Element: mouseover event - Web APIs | MDN

1 Like

Integrate dropdown menus on app list elements - Learning Resources / Guides/Tuts/Tips/Info - Elixir Programming Language Forum (elixirforum.com)

1 Like