How to implement this tooltip?

0
Hi guys, For our app I need a stunning tooltip in our form, which I found here: http://tympanus.net/Development/TooltipStylesInspiration/line.html I want to implement same tooltip but than coming out from the left. The fact is that I am not a css/js master and not all with Mendix. Is there anybody who can help/coach me developing this tooltip? EDIT 1: I tried what Allard asked and the result is like expecting and include the css, but the tooltip is not visible and becomes alsno visible when hoovering over it....What do I mis? <div class="mx-name-container8 tooltip"> <span class="mx-text mx-name-text2" data-mendix-id="143">test</span> <div class="mx-name-container9 tooltip-content"> <div class="mx-name-container10 tooltip-text"> <div class="mx-name-container11 tooltip-inner"><span class="mx-text mx-name-text3" data-mendix-id="147">Tooltip text here</span></div></div></div></div>
asked
3 answers
4

The tooltip also seems to work by just using div's, which means that you can probably use standard Mendix containers + CSS for this tooltip. If you create a container with the class 'tooltip', which contains another container with the class 'tooltip-content', which contains another container with the class 'tooltip-text', which contains another container with the class 'tooltip-inner', and you put the tooltip text within the last container, it should work as well. If you would view the source of the page in your browser, the HTML generated by Mendix should look something like this:

<div class="custom-tooltip">
    Test

    <div class="tooltip-content">
        <div class="tooltip-text">
            <div class="tooltip-inner">This will contain the tooltip text</div>
        </div>
    </div>
</div>

You then need to add the tooltip CSS to your stylesheet:

@import url(http://fonts.googleapis.com/css?family=Satisfy);
.custom-tooltip {
    display: inline;
    position: relative;
    z-index: 999;
}

/* Gap filler */
.custom-tooltip::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 100%;
    left: 50%;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.custom-tooltip:hover::after {
    pointer-events: auto;
}

/* Tooltip */

.tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 300px;
    left: 50%;
    bottom: 100%;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
    font-weight: 400;
    color: #fffaf0;
    background: transparent;
    opacity: 0;
    margin: 0 0 20px -150px;
    cursor: default;
    pointer-events: none;
    font-family: 'Satisfy', cursive;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s;
}

.custom-tooltip:hover .tooltip-content {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.tooltip-content span {
    display: block;
}

.tooltip-text {
    border-bottom: 10px solid #fffaf0;
    overflow: hidden;
    -webkit-transform: scale3d(0,1,1);
    transform: scale3d(0,1,1);
    -webkit-transition: -webkit-transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s;
}

.custom-tooltip:hover .tooltip-text {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

.tooltip-inner {
    background: rgba(85,61,61,0.95);
    padding: 40px;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.custom-tooltip:hover .tooltip-inner {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Arrow */

.tooltip-content::after {
    content: '';
    bottom: -20px;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: #fffaf0;
    border-width: 10px;
    margin-left: -10px;
}

You can make a snippet of the container setup. Turning it into a widget would probably be a better idea, but this should do the trick as well, only using Mendix containers + CSS.

answered
0

Hi Rapido,

It might be easier to use an existing tooltip widget such as this oneor this one and edit the styling using CSS.

answered
0

Because all is done in css you don't need a widget. Include the css and add a htmlsnippet in a container to get this 

                    <div class="tooltip tooltip-west">
                        <span class="tooltip-item"></span>
                        <span class="tooltip-content">Did you know that you can travel from A to B?</span>
                    </div>
answered