For an MVC 4 project I needed to add a tooltip system to give users pertinent info in various spots around the site. I tried to use some jQuery plugins (qTip 1 and 2, jQuery UI etc.) but none of them worked well out of the box with my project so I decided to write it custom since it only needed to be fairly simple. The help text is databased so I ended up placing spans with an icon image where I wanted my tooltips. On hover the jQuery strips the ending number from span ID and passes that to a db query and returns it with JSON as the content of the tooltip display div.
jQuery Code:
$('.help-info').hover(
function (e) {
//mouse enter
//strips id number for database row based on id set for html element
var helpID = $(this).attr('id').substring(10);
//variable storing the hovered html element to manipulate later
var infoElem = $(this);
//url to fetch database text data for tooltip
var url = location.protocol + '//' + location.host + '/Membership/GetHelpText';
//calculate
var center = $(window).width() / 2
var offset = infoElem.offset();
var scrolltop = $(document).scrollTop();
var xpos = (offset.left + 6).toString() + 'px';
var ypos = (offset.top - scrolltop + 2).toString() + 'px';
//creates container div with 2 inner divs
var tipdiv = $('<div />').addClass('custip').css({ 'position': 'fixed', 'left': xpos, 'top': ypos, 'z-index': '100000' });
var arrowdiv = $('<div />').addClass('arrow').css({ 'color': 'gray', 'font-size': '22px' }).html('▲');
if (e.pageX > center) {
var textdiv = $('<div />').addClass('text').css({ 'margin-left': '-180px', 'color': 'white', 'background-color': 'gray', 'padding': '5px', 'margin-top': '-4px', 'width': '200px', '-moz-border-radius': '5px', '-webkit-border-radius': '5px', '-khtml-border-radius': '5px', 'border-radius': '5px', 'border': '1px solid black', 'box-shadow': '3px 3px 5px rgba(0,0,0,0.5)', '-webkit-box-shadow': '3px 3px 5px rgba(0,0,0,0.5)', '-moz-box-shadow': '3px 3px 5px rgba(0,0,0,0.5)' });
}
else {
var textdiv = $('<div />').addClass('text').css({ 'margin-left': '-20px', 'color': 'white', 'background-color': 'gray', 'padding': '5px', 'margin-top': '-4px', 'width': '200px', '-moz-border-radius': '5px', '-webkit-border-radius': '5px', '-khtml-border-radius': '5px', 'border-radius': '5px', 'border': '1px solid black', 'box-shadow': '3px 3px 5px rgba(0,0,0,0.5)', '-webkit-box-shadow': '3px 3px 5px rgba(0,0,0,0.5)', '-moz-box-shadow': '3px 3px 5px rgba(0,0,0,0.5)' });
}
tipdiv.append(arrowdiv);
tipdiv.append(textdiv);
//fetches text data from database
$.getJSON(url, { HelpID: helpID }, function (result) {
//sets content of inner text div of tooltip to what is brought back from database
textdiv.html(result);
//appends tooltip container div to the hovered object
tipdiv.hide();
infoElem.append(tipdiv.fadeIn(500));
});
},
function () {
//mouse leave
//destroy created tooltip divs
$('.custip').fadeOut(500, function () { $(this).remove(); });
$('.arrow').fadeOut(500, function () { $(this).remove(); });
$('.text').fadeOut(500, function () { $(this).remove(); });
}
);
Html Span Code Example:
<span class="help-info" id="HelpID-01-5" style="position:relative;"><img src="../../Content/Images/icons/about-32.png" /></span>
Query DB For Help Text:
public virtual ActionResult GetHelpText(string HelpID)
{
TeamPortalService TPsvc = new TeamPortalService();
int HelpIDint;
if (Int32.TryParse(HelpID, out HelpIDint))
{
string HelpText = TPsvc.GetHelpTxt(HelpIDint);
return Json(HelpText, JsonRequestBehavior.AllowGet);
}
else
{
return Json("Error getting help text", JsonRequestBehavior.AllowGet);
}
}
public string GetHelpTxt(int HelpID)
{
using (var db = TeamPortalDataContext.Instance)
{
return (from x in db.Help_Infos
where x.HelpID == HelpID
select x.HelpText).FirstOrDefault();
}
}
You could get the content in other ways from other sources easily.
I was lazy and put all the css right in the jQuery rather than it’s own file.
The main glaring limitation I feel this code has is the fixed width for the help text display div. Probably other issues I haven’t noticed yet.