How to modify tooltip parameters with an external css file

89 views
Skip to first unread message

Eliot

unread,
Sep 26, 2022, 8:27:59 AM9/26/22
to MathJax Users
Hello,

I would like to modify some tooltip parameters like the size of the tooltip or the background color with an external css file.

Thus far, I have the two following files "main.php" and "style.css" :

main.php :

<!DOCTYPE html>
<html>

<head>
    <!-- Jquery importation -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">                 </script>

    <!-- MathJax configuration -->
    <script>
        MathJax = {
            startup: {
                ready() {
                    const {TooltipData} = MathJax._.output.common.Wrappers.maction;
                    TooltipData.postDelay = 10;  // delay in milliseconds
                    MathJax.startup.defaultReady();
                }
            }
        };
    </script>

    <!-- MathJax importation -->
    <script type="text/javascript" id="MathJax-script" async
    </script>

    <!-- Link to style sheet -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    Hoover on \( \mathtip{a}{a = \frac{dv}{dt}} \).
</body>

</html>


style.css :

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
}

Eliot

unread,
Sep 26, 2022, 1:00:42 PM9/26/22
to MathJax Users
I made some progress using \style{css}{math} and \class{name}{math} from the html mathjax extension.

But there are still some problems, when I use \style{width: 1200px; }{math} the width of the tooltip is not modified.
And I can't get working the \class{name}{math} with my separate css file.

Here is my new code :

main.php :

<!DOCTYPE html>
<html>

<head>
    <!-- MathJax configuration -->
    <script> // Configuration script which must come before the script tag that loads mathjax
        MathJax = {
            loader: {
                load: ['[tex]/action', '[tex]/html']  // This array lists the components that you want to load
            },
            tex: {
                packages: {'[+]': ['action', 'html']}   // lists the names of the packages that should be initialized by the TeX input processor
            }
        };
    </script>

    <!-- MathJax importation -->
    <script type="text/javascript" id="MathJax-script" async
    </script>
   
    <!-- Link to style sheet -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    Hover on \(\mathtip{a}{\style{background-color: red; width: 1200px;}{a = \frac{dv}{dt}}}\). <br>

    Hover on \(\mathtip{a}{\class{"cssmathjax"}{a = \frac{dv}{dt}}}\).
</body>

</html>


style.css :

.cssmathjax {
    position: relative;
    display: inline-block;
    background-color: red;
    width: 1200px;
}

Davide Cervone

unread,
Sep 28, 2022, 7:13:40 PM9/28/22
to mathja...@googlegroups.com
OK, so here is the deal:

First, MathJax v3 doesn't use .tooltip or .tooltiptext for its tooltips, so style those won't make any difference.

Second, since you are using SVG, and since the tooltip is made of SVG elements, your styles need to be ones that affect SVG elements.  Most SVG elements don't respond to a "width" attribute.  Also, MathJax doesn't know about inherited CSS attributes, only explicit ones, like the ones using the \style command that you mention in your second message.  For the \style macro, not everything that affects CHTML output will affect SVG output.  MathJax does processes a few style attributes (like border, padding, color, and background-color) for SVG, but not every CSS property, and width is one that it doesn't process.

You could, however, use one of the macros that creates boxes to a particular size, such as the \makemathbox macro from the math tools package. So, for example, you could use

\mathtip{a}{\style{background-color: red}{\mathmakebox[1200px][l]{a = \frac{dv}{dt}}}}

to make the tooltip be 1200px (left justified) with a red background.  You could define a macro to make that easier for you to use.  Perhaps that is sufficient for your needs.  

If you want to style ALL the SVG tooltips, you would need to use something like

mjx-tip {
  background-color: red ! important;
  width: 1200px;
  text-align: left;
}

Hope that helps.

Davide


--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/f6401b24-abe3-4fde-b877-d9ed33597ed9n%40googlegroups.com.

Murray

unread,
Sep 30, 2022, 3:03:13 AM9/30/22
to MathJax Users
Eliot

Further to Davide's response, I was wondering if you are aware that any overflow from tooltips is hidden.

So if your math with a tooltip happens to be near the right side of the screen and the user does a mouseover, a 1000px-wide tooltip will be mostly hidden.

On a phone, most of the content of your tooltip will be hidden no matter where the math is on the screen.

Regards
Murray

Eliot

unread,
Sep 30, 2022, 7:23:25 AM9/30/22
to MathJax Users
Thanks for your responses! I didn't knew about the overflow, I'm very new in terms of webcoding so I'm still experimenting without understanding everything.

I would like to implement a feature similar to wikipedia where when the user hovers over a math expression then a tooltip appears with a brief explaination of what the concept his or a link to another php page explaining the concept. But now I realize that I can't control how long the tooltip is open and that makes it impossible to click on the link unless I make a custom mathjax extension which I currently don't have the level for. So i'll try to implement this feature with a popup appearance instead.
Reply all
Reply to author
Forward
0 new messages