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

Where and how to beautify mouse over layer with CSS?

+4 votes
623 views
in Plugins by
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
by
selected by
 
Best answer

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.

by
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".
Snow Theme by Q2A Market
Powered by Question2Answer
...