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
73 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.

commented 6 days ago 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".
...