Archived topic
Tooltips lightweight-social-icons-style in nav bar
5 replies · Started by Marc on August 20, 2019
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!
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/
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>
Awesome - make sure it works on all pages (if LSI isn't present everywhere).
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.
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.
