Custom Tooltip Position

01 Sep '14, 12:21 PM
No Forum Badges



What is the required wrapper code for a custom tooltip?

I need a little example for my custom template.



x 0
Answer Answer at this question and get points!
Forum Starter - Level 3

Hi Manuel, 

If you want to customize a tooltip, you have to modify your custom template adding the <span> tag containing your tooltip text and using a different CSS class.

For example, let's suppose you have a List component. If you want to create custom tooltip for each Flow starting from this List, you have to make the following steps:


  1. Create a custom template for your Flow, for example 
  2. If you want to make it easy, you can copy the starting code from in WRDefault Style Project and paste it into your custom template
  3. Add the <span> tag in the existing <a> tag, and enter into it the text you want to display in your tooltip
  4. Change the CSS class associated to your link and enter a new class (i.e "my_tooltip") you will define later. 
  5. Finally your link template should be like this: 

    def formBean = getFormBeanName(page)    
    if ((type == "") && (link["unitId"] != "")) {  // link individually placed
         type = isFormBased(getById(link["unitId"])) ? "button" : ""
    [% if ("button" == type) { %]
        <input onclick="[%if (link["newWindow"] == "true") { %]$('#[%= escapeCSS(formBean) %]')[0].target='_blank'[% } else { %]$('#[%= escapeCSS(formBean) %]')[0].target='_self'[% } %]" [%= styleClass ? "class=\"${styleClass}\"" : "" %] id="button:[%= link["id"] %]" name="button:[%= link["id"] %]" type="submit" value="<wr:Label context="link"/>">
    [% } else { %]
        <a class="my_tooltip" href="<webratio:Link link="[%= getLinkId(link) %]" position="[%= position %]"/>"[%if (link["newWindow"] == "true") { %] target="_blank"[% } %]>
            <wr:Label context="link"/> <span>This is my tooltip content</span>
    [% } %]
  6. In your CSS file create the class "my_tooltip" and enter all the rules you desire for your tooltip:

    a.my_tooltip span {
        width: 140px;
        height: auto;
        color: #fff;
  7. Then, in your model, select the List component and move to the Layout view
  8. Select the List component in the grid and move to the Properties View
  9. Click on the dropdown menu next to the Flow Layout property and select your custom template

You can repeat this procedure with attribute tooltip (using a custom attribute template), image, and so on.

x 1
No Forum Badges

Thanks for four reply, but I need other way to use que custom toolTip option in the properties box of my List Component. That option, put a toolTip over all columns of the List, but, I need put my toolTip over an specific column.

Te solution by webratio support is the next:


If you want to show the Tooltip on a specific Attribute (column) you can refer to these steps (for WebRatio 7.x):

- define custom as Tooltip Position Property

- create a custom Component Template (e.g. a template for the List component)

- edit this template

- define wr-tooltipTarget as Style Class Property of the desired Attribute (select the Component in the Grid and choose the desired Attribute node in the Outline View).

In the custom Template you have to:

1) write this code in the Groovy definitions section of the template:

def printTooltipActionAttribute = { position = "index" ->
    def tooltipLink = getById(unit["ajaxTooltipLink"])
    def formPostDescriptor = ""
    if (isFormBased(tooltipLink.parent)) {
        formPostDescriptor = "," + getFormBeanName(page) + ",button:" + tooltipLink["id"]
    %]data-tooltip-action="<webratio:Link link="[%= getLinkId(tooltipLink) %][%= getElementContext(page, "_", "_", null) %]" position="[%= position %]"/>[%= formPostDescriptor %]"[%

2)  Write [% printTooltipActionAttribute(index) %] between the parameters of the html element in which the Attribute value is printed. If you are using a different variable for indexing, replace "index" with your variable. For example:

<td [% printTooltipActionAttribute(index) %] class="<wr:StyleClass/> value<c:if test="${<wr:Id context="unit"/>.currentIndex eq index}">Current</c:if>[% if (useAlternate == "true") { %]<c:if test="${index mod 2 eq 0}">Alternate</c:if>[% } %] [%= attr["type"]%]">                
   <wr:Value />


In this way you should be able to apply the tooltip only on the desired column.



x 0
Answer at this question and get points!

Related questions

2 grids inside one/same cell result in non-selectable 2nd grid Access page variable in a page template add html Ajax is not working in own style project Ajax web app with javascript history object using the WebRatio Alimentar graficas con base de datos Alternate way to get current User Oid in layout template groovy script? Any way to localize the Tab Grid Template (Webratio Store)? Applicare un template ad un Web Project Ayuda Simple List Component Layout personalizado Bootstrap Style Button to go on another page Cambiare dimensioni bottoni - Change button size Can I inject html into custom unit template?! Change color template bootstrap style Change Style Changing the login page does not work ckeditor - change directory for the browser Colore Attributi index unit Dinamico - Index unit dynamic attribute color Como abrir una ventana en ajax desde una master page Como embeber un video subido desde archivo ? Como mostrar una imagen de portada arriba del menu? Como mostrar una imagen en una lista o en la componente detalles? Confirm Dialog Customize layout mobile platform Default error pages default login page Display contents of a URL Dynamic link labelling for Custom Unit Error in Excel Unit - Font size Export to a HTML/CSS/JS project Field as link soruce File CSS non considerato in generazione Form element Form template Get date pattern Get home page from template Google map is not shown properly in the tab grid Guardar Saltos de LINEA HelloWorld Unit sample code Hiding landmarks (or flows) when the user is logged in How can i create pagemenu or landmarkmenu with multiple levels. How can I modified the htmls files to perform my style How to add an image in a modal/pop-up window? How to include a template into other template? How to localize AJAX waiting dialog? How to localize the multi message unit in the notification layout How to modify template? How to modify the FertileEnviroment Default page How to remove default Linked Resources? How to use LandmarkMenu as AJAX navigation how to use the landmark menu as AJAX navigation integrate framework to webratio mobile Integrazione javascript Javascript and html javascript history object Localize "Welcome..." and "Process details" logo webratio meaning of each tag in the XML code (Show XML/Show Layout XML) modify field html Modify html generated by wr:NavigationBar Pages Problem After Project Generation pass template variable Problem Login Form only if user not logged Problem print Problems with the page refresh (Tab Grid) Problem with adding templates query unit who to hide fields that are used in a link Recursive Hierarchical Index Unit Style Tree Redirect to the default module Remove default BPM css import for all templates Responsive Bootstrap Grid Responsive Layout Manager Set context parameter Simple Static Page Standard confirm dialog replacement Style hierarchical unit help!! Supoort for Mobile and Desktop display Target tabs in Tab Grid Control Tooltip on a field Too much layout parameters = no scroll in parameters config window Uppercase Use image as interaction flow Vista de diferentes Site Views Webratio Add-ons no permite login wr-ajaxDivs break layout on ajax pages.