Make links with tooltip visually different

[humitos]

It would be good to make these links visually different from a regular link that won't show a tooltip.

It may be a small icon, or maybe some CSS style.

I was thinking on using the same style as :abbr:, that adds a small dotted border at the bottom as the first approach.

[humitos]

Small border,

.hoverxref {
  border-bottom: 1px dotted;
}

Using an icon,

.hoverxref:after {
  content: " \f05a";
  font-family: FontAwesome;
  top: -5px;
  position: relative;
  font-size: 70%;
}

[humitos]

Some initial work was done at 67f30ed

It can be improved, though.

[humitos]

[humitos]

  content: " \f05a";

content: " \f0eb";, using a light bulb looks nicer: https://fontawesome.com/icons/lightbulb

[humitos]

I think the current behavior is fine for now and there is nothing we should do at this point. Users can always extend the CSS to customize the look & feel. We haven't receive any complain about how it looks yet, so I'd say it's fine for now and we can close this issue.

[maxmahlke]

I just spent some time adapting the appearance of the tooltip-links. Note that compared to @humitos CSS snippet above, I had to adapt the name of the hoverxref object to hxr-hoverxref. I succeeded by putting the following into the custom.css file:

.hxr-hoverxref {
  border-bottom: 0px;
  color: LightCoral;
}

[benjaoming]

Thanks @maxmahlke !

There are many Sphinx extensions that add new objects to the DOM with a special meaning. It should be up to the themes to add further visual styling on top of a styling that the extension defines. It's also up to the themes to decide which extensions are popular enough.

If there are more cool ideas, such as the light bulb icon, I think that we could add extra styling in sphinx_rtd_theme (for instance in a separate extensions.scss).