XF 2.3 The text that appears when you hover over the icon

[hakyangler]

Hello ;

how can I make the "follow" text appear when I hover over the icon with the mouse, as in the example picture?

 

[bzcomputers]

You need to add "title" attribute to you link tag. The title will then be what appears on hover of the icon/link.

<a title="Follow XXX On YouTube" href="https://www.youtube.com/XXX/" target="_blank" rel="nofollow noopener"><i class="fab fa-youtube" data-xf-init="icon"></i></a>

 

[hakyangler]

You need to add "title" attribute to you link tag. The title will then be what appears on hover of the icon/link.

<a title="Follow XXX On YouTube" href="https://www.youtube.com/XXX/" target="_blank" rel="nofollow noopener"><i class="fab fa-youtube" data-xf-init="icon"></i></a>

thank you, it worked for me, now I can beautify it with some css.

 

[bzcomputers]

This may help you get started with the css...

a {
  position: relative;
  display: inline-block;
}
a[title]:hover:after {
  content: attr(title);
  position: absolute;
  text-align: center;
  padding: 5px;
  width: 100%;
  color: #ffffff;
  background: #000000;
  border-radius: 10px;
  top: 100%;
  left: 0;
}

 

[hakyangler]

a small addition from me, this is the result for friends who need it in the future. this way, there is no need to add css.

data-xf-init="tooltip"

<a title="Follow XXX On YouTube" href="https://www.youtube.com/XXX/" target="_blank" data-xf-init="tooltip" rel="nofollow noopener"><i class="fab fa-youtube" data-xf-init="icon"></i></a>