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
45 views
asked Apr 16 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 by sama55

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

qa-plugin/mouseover-layer/qa-mouseover-layer.php

    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"

<style>
.qa-q-item-title a span {
position:relative;
}
.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;
font-weight:normal;
line-height: 1.2em;
content: attr(data-title);
z-index: 1;
border: 1px solid #ccc;
background: #eee;
color: #333;

}
</style>

Note:

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

...