Tooltip/ hover not rendering correctly in template file

Phoenix Forum Questions / Help
, , ,
1

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!

2

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

3

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
4

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…

5

I think it’s title, not data-tooltip

6

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

7

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?

8

Probably not…

What You describe is a dropdown, not a tooltip.

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

1 Like
10

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
11

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

1 Like