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 and extract image
Margerite.zip (22.9 KB)
Let’s create our image
- Create a new application
- Drag an image control on the canvas
- Rename the image as ImageMargerite
- Add the downloaded image above using the image browse button and click save
- 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
- Enable style sheet
- 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
- Drag and drop a javascript action on the StartPage.Load canvas
- 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!";
}
- Click Save
That was our last step . Click preview
Sample
NewApplication.sapz (28.8 KB)