Adding and changing tooltip style of images

Description:

We will use javascript and CSS to style tooltips on images.


Important note:

We are going to use data-title attribute. data-* attributes are a method to store custom data in DOM elements/HTML. Since we cannot use :before or :after on elements which are not containers, we are going to use the element’s container <div> and has the pseudo-tooltip on the container.


Download

Download the following image .

margerite

Let’s create our image
  1. Create a new application
  2. Drag an image control on the canvas
  3. Rename the image as ImageMargerite
  4. Add the downloaded image above using the image browse button and click save
  5. Preview the application

Let’s analyze how the image is rendered in our browser using the developer console.

  • Press CTRL+ SHIFT+J to open the developer console.
  • Go to elements section or right-click on image and select inspect

The image is wrapped in a div with id StartPage_ImageMargerite-container.


Adding the css style

  1. Enable style sheet
  2. Open the stylesheet and paste the following code
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #cfc;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Hooking the css using the image properties

We are going to add the newly created class pseudo-tooltip-wrapper in the image class properties. Type in pseudo-tooltip-wrapper in the class section


Setting pseudo-tooltip text using javascript
  1. Drag and drop a javascript action on the StartPage.Load canvas
  2. Copy and paste the following code into the code section
$(document).ready(function(){
  document.getElementById('StartPage_ImageMargerite-container').setAttribute('data-title', MyFunction());
});

function MyFunction() {
        return "Hello this is css!";
    }
  1. Click Save

That was our last step :smiley:. Click preview


Sample

NewApplication.sapz (28.8 KB)