Hover for logout button

1
Follow up to: https://community.mendix.com/questions/2927/Mx-toolbar-only-show-logout-button. Can I add a hover for the logout button to show "Logout" as text?
asked
3 answers
6

This is possible.

Replace the toolbar widget (mendix.widget.MxToolbar) with the following HTML. The "title" attribute makes the text in the hover possible.

<div class="MxClient_toolbar" id="MxClient_toolbar">
    <div onclick="mx.ui.runModule('Desktop')" alt="Desktop" title="Desktop"></div>
    <div style="background-position: -24px 0;" onclick="mx.screen.refresh()" alt="Refresh" title="Refresh"></div>
    <div style="background-position: -48px 0;" onclick="mx.screen.back()" alt="Back" title="Back"></div>
    <div style="background-position: -72px 0;" onclick="mx.screen.forward()" alt="Forward" title="Forward"></div>
    <div style="background-position: -96px 0;" onclick="mx.ui.runModule('Logout')" alt="Logout" title="Logout"></div>

You need to place the toolbar background-image on the div inside the toolbar division and remove the background-image from "MxClient_toolbar".

.MxClient_toolbar div {
    float: left;
    cursor: pointer;
    width: 20px;
    height: 24px;
    background: url(images/layout/toolbar.png) no-repeat;

}

answered
2

In your index.html file, you will have something like

<div class="MxClient_toolbar" id="MxClient_toolbar" dojoType="mendix.widget.MxToolbar"></div>

Replace that with the first section of Erik's code. The second part is for your custom.css file

answered
0

Where can you find the MxToolbar widget? I looked everywhere (in project en mendix system folders), but i only could find the MxToolbar.css file.

answered