HomeProblem with tooltip and forum title
3 posters
Page 2 of 2
Page 2 of 2 • 
1, 2
Problem with tooltip and forum title
by darki July 25th 2015, 10:14 am
First topic message reminder :
Hi,
I use tooltip in my forum, here the codes:
My problem in forums, where I use e.g. the following as name/title of forum (so that tooltip appears)
<a class="forumtitle" href="/f33-" title="OFF-Topic-Bereich des Schiggysboards">OFF-Topic</a>
is that:
Does anyone has an idea how to change the title/name, so that the problem in picture above won't appear?
Thanks in advance!
Hi,
I use tooltip in my forum, here the codes:
- Spoiler:
- Code:
// tipsy, facebook style tooltips for jquery
// version 1.0.0a
// (c) 2008-2010 jason frame [jason@onehackoranother.com]
// releated under the MIT license
(function($) {
function fixTitle($ele) {
if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') {
$ele.attr('original-title', $ele.attr('title') || '').removeAttr('title');
}
}
function Tipsy(element, options) {
this.$element = $(element);
this.options = options;
this.enabled = true;
fixTitle(this.$element);
}
Tipsy.prototype = {
show: function() {
var title = this.getTitle();
if (title && this.enabled) {
var $tip = this.tip();
$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
var pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth,
height: this.$element[0].offsetHeight
});
var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight;
var gravity = (typeof this.options.gravity == 'function')
? this.options.gravity.call(this.$element[0])
: this.options.gravity;
var tp;
switch (gravity.charAt(0)) {
case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 's':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'e':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
break;
case 'w':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
break;
}
if (gravity.length == 2) {
if (gravity.charAt(1) == 'w') {
tp.left = pos.left + pos.width / 2 - 15;
} else {
tp.left = pos.left + pos.width / 2 - actualWidth + 15;
}
}
$tip.css(tp).addClass('tipsy-' + gravity);
if (this.options.fade) {
$tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}
}
},
hide: function() {
if (this.options.fade) {
this.tip().stop().fadeOut(function() { $(this).remove(); });
} else {
this.tip().remove();
}
},
getTitle: function() {
var title, $e = this.$element, o = this.options;
fixTitle($e);
var title, o = this.options;
if (typeof o.title == 'string') {
title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
} else if (typeof o.title == 'function') {
title = o.title.call($e[0]);
}
title = ('' + title).replace(/(^\s*|\s*$)/, "");
return title || o.fallback;
},
tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
}
return this.$tip;
},
validate: function() {
if (!this.$element[0].parentNode) {
this.hide();
this.$element = null;
this.options = null;
}
},
enable: function() { this.enabled = true; },
disable: function() { this.enabled = false; },
toggleEnabled: function() { this.enabled = !this.enabled; }
};
$.fn.tipsy = function(options) {
if (options === true) {
return this.data('tipsy');
} else if (typeof options == 'string') {
return this.data('tipsy')[options]();
}
options = $.extend({}, $.fn.tipsy.defaults, options);
function get(ele) {
var tipsy = $.data(ele, 'tipsy');
if (!tipsy) {
tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
$.data(ele, 'tipsy', tipsy);
}
return tipsy;
}
function enter() {
var tipsy = get(this);
tipsy.hoverState = 'in';
if (options.delayIn == 0) {
tipsy.show();
} else {
setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
}
};
function leave() {
var tipsy = get(this);
tipsy.hoverState = 'out';
if (options.delayOut == 0) {
tipsy.hide();
} else {
setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
}
};
if (!options.live) this.each(function() { get(this); });
if (options.trigger != 'manual') {
var binder = options.live ? 'live' : 'bind',
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
this[binder](eventIn, enter)[binder](eventOut, leave);
}
return this;
};
$.fn.tipsy.defaults = {
delayIn: 0,
delayOut: 0,
fade: false,
fallback: '',
gravity: 'n',
html: false,
live: false,
offset: 0,
opacity: 0.8,
title: 'title',
trigger: 'hover'
};
// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
$.fn.tipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
};
$.fn.tipsy.autoNS = function() {
return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
};
$.fn.tipsy.autoWE = function() {
return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
};
})(jQuery);
- Spoiler:
- Code:
$(document).ready(function(){
$(function() {
$('a').tipsy({fade: true, gravity: 's'});
$('.i_icon_quote').tipsy({fade: true, gravity: 's'});
$('.i_icon_edit').tipsy({fade: true, gravity: 's'});
$('.i_icon_delete').tipsy({fade: true, gravity: 's'});
$('.i_icon_ip').tipsy({fade: true, gravity: 's'});
$('.i_icon_profile').tipsy({fade: true, gravity: 's'});
$('.i_icon_pm').tipsy({fade: true, gravity: 's'});
$('.topic-title').tipsy({fade: true, gravity: 's'});
$('.i_post').tipsy({fade: true, gravity: 's'});
$('.i_reply').tipsy({fade: true, gravity: 's'});
});
});
- CSS:
- Code:
.tipsy {
padding: 5px;
font-size: 11px;
position: absolute;
text-shadow: none;
z-index: 999;
}
.tipsy-inner {
padding: 8px 8px 8px 8px;
background-color: #12A3EB;
color: white;
font-weight: 700;
max-width: 200px;
text-align: center;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
background: black url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px;
}
.tipsy-inner {
border-radius: 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.tipsy-arrow {
position: absolute;
background: url('http://cuul.tk/img/tipsy.gif') no-repeat top left;
width: 9px;
height: 5px;
}
.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -4px;
}
.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
}
.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
}
.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;
}
.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;
}
.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -4px;
right: 0;
width: 5px;
height: 9px;
background-position: top right;
}
.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -4px;
left: 0;
width: 5px;
height: 9px;
}
My problem in forums, where I use e.g. the following as name/title of forum (so that tooltip appears)
<a class="forumtitle" href="/f33-" title="OFF-Topic-Bereich des Schiggysboards">OFF-Topic</a>
is that:
Does anyone has an idea how to change the title/name, so that the problem in picture above won't appear?
Thanks in advance!
Last edited by darki on September 6th 2015, 12:45 pm; edited 3 times in total
darki- Forumember
- Posts : 254
Reputation : 10
Language : German, english -
darki- Forumember
- Posts : 254
Reputation : 10
Language : German, english -
darki- Forumember
- Posts : 254
Reputation : 10
Language : German, english -
Re: Problem with tooltip and forum title
by Ange Tuteur September 6th 2015, 11:55 am
Hi @darki,
I apologize for the delay. Anyway, when you post this code as the title :
It creates a second block correct ? This is because you're creating a link inside a link, browsers are picky about that so it gives you the result of two links in the page-title. In short; it's not a problem caused by tipsy tooltips.
Since you're using a class name in your link you should use the following CSS based on what you're attempting.
If you're doing this for all page titles use these rules :
otherwise use this rule instead which simply hides the empty links.
I apologize for the delay. Anyway, when you post this code as the title :
- Code:
<a class="forumtitle" href="/f33-" title="OFF-Topic-Bereich des Schiggysboards">OFF-Topic</a>
It creates a second block correct ? This is because you're creating a link inside a link, browsers are picky about that so it gives you the result of two links in the page-title. In short; it's not a problem caused by tipsy tooltips.
Since you're using a class name in your link you should use the following CSS based on what you're attempting.
If you're doing this for all page titles use these rules :
- Code:
h1.page-title a { display:none }
h1.page-title a.forumtitle { display:block }
otherwise use this rule instead which simply hides the empty links.
- Code:
h1.page-title a:empty { display:none }
Ange Tuteur- Forumaster
-
Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania -
Re: Problem with tooltip and forum title
by darki September 6th 2015, 12:05 pm
Thank you, @Ange Tuteur, you are a genius! It works great! 
Now I have a last small problem (which is not so important
). In "Who is online?" page will the forums with the code for the title you quoted appear in bold.
How to solve that? :s
Now I have a last small problem (which is not so important
). In "Who is online?" page will the forums with the code for the title you quoted appear in bold.How to solve that? :s
darki- Forumember
- Posts : 254
Reputation : 10
Language : German, english -
Re: Problem with tooltip and forum title
by Ange Tuteur September 6th 2015, 12:36 pm
You want any forums that appear here to have a bold font-weight, correct ? If so, this should work :
- Code:
.forumbg .table1 a[href^="/f"] {
font-weight:bold;
}
Ange Tuteur- Forumaster
- Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania -
Re: Problem with tooltip and forum title
by darki September 6th 2015, 12:44 pm
Nearly. Forums which have this title
But your piece of CSS is what I need. I only changed the font-weight to 'normal'.
Thank you, Ange.
Problem solved.
Forums which have this title- Code:
<a class="forumtitle" href="/f33-" title="OFF-Topic-Bereich des Schiggysboards">OFF-Topic</a>
But your piece of CSS is what I need. I only changed the font-weight to 'normal'.
Thank you, Ange.
Problem solved.
darki- Forumember
- Posts : 254
Reputation : 10
Language : German, english -
Re: Problem with tooltip and forum title
by Ange Tuteur September 6th 2015, 12:50 pm
Oooh, I misread. 
You're welcome, and sorry again for the long wait.
Topic archived
Have a good day. ^^
You're welcome, and sorry again for the long wait.
Topic archived
Have a good day. ^^
Ange Tuteur- Forumaster
- Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania -
Page 2 of 2 • 1, 2
Similar topics» How do I add tooltip to the title tags? [phpbb3]
» Forum Title Problem
» Forum Title Problem!
» code problem, forum title
» Tipsy tooltip problem
» Forum Title Problem
» Forum Title Problem!
» code problem, forum title
» Tipsy tooltip problem
Page 2 of 2
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
