Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

Where and how to beautify mouse over layer with CSS?

+4 votes
asked Apr 16, 2017 in Plugins by Yogendra Basnet
How can I add background colour, border and other css customization to mouse over layer. The default mouse over layer is plain i wish to add background colour and border colour but I did not find anything as such in the css section where I can change . Plese let me know how to do this.
Q2A version: latest

1 Answer

+3 votes
answered Apr 16, 2017 by sama55
selected Dec 19, 2017 by Yogendra Basnet
Best answer

Perhaps it is necessary to hack plugin and to add custom CSS.


    private function getHtmlTitle($mouseOverText, $questionTitle) {
        //return sprintf('<span title="%s">%s</span>', $mouseOverText, $questionTitle);
        return sprintf('<span data-title="%s">%s</span>', $mouseOverText, $questionTitle);

"Admin" > "Layout" > "Custom HTML in <head> section of every page"

.qa-q-item-title a span {
.qa-q-item-title a span[data-title]:hover:after {
display: block;
position: absolute;
top: 1.5em;
left: 0em;
margin-top: 0.5em;
padding: 0.25em 0.5em;
max-width: 20em;
word-wrap: break-word;
font-size: 13px;
line-height: 1.2em;
content: attr(data-title);
z-index: 1;
border: 1px solid #ccc;
background: #eee;
color: #333;



This may not be good. Please consider as one reference technique. It may be better to hack the plugin to use tooltip JS.

commented Oct 15, 2017 by Yogendra Basnet
This works  fine. Thank you so much.
Is there any way to add css in the plugin itself rather than  adding it in "Custom HTML in <head> section of every page".