current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.
up vote 2 down vote favorite

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?

share|improve this question
    
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 Answer 1

up vote 1 down vote

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

share|improve this answer
    
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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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