2

I have a visualforce that I have built using bootstrap 3.2 but I want to enable a tooltip on one of the input boxes. I have not been able to make this work yet. Does anyone know how to do this?

I have tried,

<apex:inputField value="{!Case.Priority}" required="true" styleClass="col-md-2 col-sm-3 col-xs-7" onmouseover="$('.showTT').tooltip('show')">
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

and also,

<apex:inputField value="{!Case.Priority}" required="true" styleClass="col-md-2 col-sm-3 col-xs-7" data-toggle="tooltip" data-placement="right" title="Tooltip on right">

But neither have worked/are possible. Is it possible to have a tooltip?

  • will you be ok to use pure html, is there a reason for using apex:inputfield? – Rao Aug 25 '14 at 19:15
  • It is a dropdown (pick list) field. How would I create this using pure HTML and still have visualforce grab the input? Also, will this mess up form validation or will it still be able to validate the pure HTML route? – Grady D Aug 25 '14 at 19:17
  • I did not know the inputfield was a picklist, having known that inputfield is a picklist, is bootstrap a requirement? if not there are multiple tutorials available for mimicing tooltip behavior on a VF page. – Rao Aug 25 '14 at 20:25
  • No worries, I should have specified. Bootstrap is not a requirement, I am just already using the framework so was trying to leverage what was already provided. – Grady D Aug 25 '14 at 20:27
1

I created a page using pure jquery's tooltip feature:

Page:

<apex:page standardController="account" showHeader="false" extensions="Account_controller">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
<apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />
<script>
var $j = jQuery.noConflict();
$j(".uitip").tooltip();

function getselected(){
var selectedval = $j("#selectlist option:selected").text();
$j("input[id$='selected_val']").val(selectedval);
}
</script>

<apex:form >
<apex:pagemessages ></apex:pagemessages>
<apex:pageblock >
Account source : <select class='uitip' id="selectlist">
    <apex:repeat value="{!Accountsources}" var="src">    
        <option title="{!titlemap[src]}">{!src}</option>
    </apex:repeat>
</select>
<apex:pageBlockSection >
<apex:outputText value="Selected Option is: {!selectedOptionValue}" rendered="{!NOT(ISBLANK(selectedOptionValue))}"></apex:outputText>
<br/>
<apex:commandButton id="selectedbutton" value="selectedvaldisplay" onclick="getselected();"/>
<apex:inputHidden value="{!selectedOptionValue}" id="selected_val"/>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page><apex:page standardController="account" showHeader="false" extensions="Account_controller">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
<apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />
<script>
var $j = jQuery.noConflict();
$j(".uitip").tooltip();

function getselected(){
var selectedval = $j("#selectlist option:selected").text();
$j("input[id$='selected_val']").val(selectedval);
}
</script>

<apex:form >
<apex:pagemessages ></apex:pagemessages>
<apex:pageblock >
Account source : <select class='uitip' id="selectlist">
    <apex:repeat value="{!Accountsources}" var="src">    
        <option title="{!titlemap[src]}">{!src}</option>
    </apex:repeat>
</select>
<apex:pageBlockSection >
<apex:outputText value="Selected Option is: {!selectedOptionValue}" rendered="{!NOT(ISBLANK(selectedOptionValue))}"></apex:outputText>
<br/>
<apex:commandButton id="selectedbutton" value="selectedvaldisplay" onclick="getselected();"/>
<apex:inputHidden value="{!selectedOptionValue}" id="selected_val"/>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>

controller:

public class Account_controller {
public string selectedOptionValue{get;set;}
public map<string,string> titlemap{get;set;}
    public Account_controller(ApexPages.StandardController controller) {
    titlemap = new map<string,string>();
    }
public List<String> getAccountsources()
{
  List<String> options = new List<String>();

   Schema.DescribeFieldResult fieldResult =
 Account.Accountsource.getDescribe();
   List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();

   for( Schema.PicklistEntry f : ple)
   {
      options.add(f.getValue());


   }
   for(string opt:options){
       titlemap.put(  opt,'your choice is :'+opt);
       }
   return options;
}

}public class Account_controller {
public string selectedOptionValue{get;set;}
public map<string,string> titlemap{get;set;}
    public Account_controller(ApexPages.StandardController controller) {
    titlemap = new map<string,string>();
    }
public List<String> getAccountsources()
{
  List<String> options = new List<String>();

   Schema.DescribeFieldResult fieldResult =
 Account.Accountsource.getDescribe();
   List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();

   for( Schema.PicklistEntry f : ple)
   {
      options.add(f.getValue());


   }
   for(string opt:options){
       titlemap.put(  opt,'your choice is :'+opt);
       }
   return options;
}

}

output:

enter image description here

  • Sadly this is not a tooltip, atleast not in regards to what I was referring to. I am referring to static text that pops out on hover, getbootstrap.com/javascript/#tooltips. The specific tooltip I am after is to the right. Is there any way to accomplish that? – Grady D Aug 26 '14 at 1:40
  • 1
    This was the blog I based my tooltip : salesforce-stuff.blogspot.com/2011/10/easy-hover-tool-tip.html , goggling around select options and tooltip seems to be hard to do. Will try to see how much I can refine my jquery skills and improve this answer. – Rao Aug 26 '14 at 2:57
  • Thanks for the help but I would not spend anymore time working on this unless it is something that you also need. It is a very minor UI feature. The old method that I was using was having a hidden <div> and using the css :hover attribute to change the display to block. This worked but did not flow with the UI like the designers desired. It looks like SF communities will be getting more elements and such in Winter 15. I will try again then. Thank you for all the help so far! – Grady D Aug 26 '14 at 3:01
  • most welcome :) – Rao Aug 26 '14 at 5:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.