[Resolved] Tooltips lightweight-social-icons-style in nav bar

Home Forums Support [Resolved] Tooltips lightweight-social-icons-style in nav bar

Home Forums Support Tooltips lightweight-social-icons-style in nav bar

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #988747
    Marc

    Hi Tom,

    I added some social icons to the navbar, as described here: https://generatepress.com/forums/topic/adding-social-icons-to-menu-items/

    And I would like to have tooltips in the same style as used for the lightweight social icons widget.
    I tried to add tooltip and tooltipstered as classes without success.

    Do you have any idea how I could do this?
    It would be nice if I could use the same js? which is used by lightweight social icons, so I do not need to load anthying in addition.

    Thanks!

    #989244
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I don’t believe it would work to use the tooltips from the LSI plugin, unfortunately.

    If it was me, I’d look into integrating this framework: https://kazzkiq.github.io/balloon.css/

    #989553
    Marc

    Hey Tom,

    thanks for the advice.
    Actually I figured out how to do it.

    I was adding the css classes to the <li> menu element, which did not work.

    This time I added it to the <i>. And now it works like a charm.
    <i class="lsicon lsicon-instagram tooltip tooltipstered" title="Instagram"></i>

    #989842
    Tom
    Lead Developer
    Lead Developer

    Awesome – make sure it works on all pages (if LSI isn’t present everywhere).

    #989846
    Marc

    Thanks for the hint. I had that in mind. And as I use LSI in a widget in the footer, it is always present.

    What I don´t really understand is why I can´t use tooltipster on the <li> element. Using the <i> element is fine, but it is much smaller.

    EDIT: oh I got it now, when using individual links for menus, classes are added to the <li> element, but titles are added to the <a> element, that´s why it is not working.

    #990146
    Tom
    Lead Developer
    Lead Developer

    Ideally, I would look at the library I mentioned above if the LSI way is giving you a hard time. It’s a much better tooltip library.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.