Skip to content
This repository was archived by the owner on Nov 17, 2025. It is now read-only.

add class scope, re-init before showing, rich triangle #6

Merged
merged 6 commits into from
Jan 18, 2015
Merged

add class scope, re-init before showing, rich triangle #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e362baf
add class scope, re-init before showing, rich triangle
KynoYang Jan 16, 2015
65276ab
clear code
KynoYang Jan 17, 2015
f2e9a48
let title inherit from title attribute when tooltipTitle is undifined
KynoYang Jan 17, 2015
9eff967
remove and set 'after' color transparent
KynoYang Jan 17, 2015
0fe47c9
add tooltipLazy to scope
KynoYang Jan 17, 2015
a8020df
boolean value should be evaluated
KynoYang Jan 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 59 additions & 16 deletions src/css/angular-tooltips.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,44 +36,87 @@
transition: opacity 0.2s linear;
opacity: 1;
}
._720kb-tooltip-caret:before {
Copy link
Member

@45kb 45kb Jan 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is something wrong with the caret style, i see tooltip content in lighter background color and caret is darker( caret is more black , content is more grey)

Copy link
Contributor Author

@KynoYang KynoYang Jan 17, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's my fault.
I add this because in our design, I need to set a border for the whole tooltip including the triangle. So, I use two triangle: the "before" one with larger size works as the border, the "after" one with smaller size works as the content. Just like what github does. You can check the style of github.
image

Copy link
Member

@45kb 45kb Jan 17, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok no problems just give to caret and content the same background ;)

Copy link
Contributor Author

@KynoYang KynoYang Jan 17, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are the same. The color of triangle is darker because of opacity.
How about set “after” no color? it makes the triangle look like what it is before.

Copy link
Member

@45kb 45kb Jan 17, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes as it was before i think it was ok.

I liked a lot the "trasparent" replacement of rgba(0,0,0,0) you did, are we sure is it supported as well and even better than rgba()?

I tried searching a lot but no results, probably trasparent is fully supported since CSS1 so better than rgba() in such cases....

content:'';
position: absolute;
width: 0;
height: 0;
border: 6px solid rgba(0, 0, 0, 0.8);
}
._720kb-tooltip-caret:after {
content:'';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
._720kb-tooltip-left ._720kb-tooltip-caret:after {
._720kb-tooltip-left ._720kb-tooltip-caret:before {
top: 50%;
left: 100%;
margin-left:0;
margin-top: -6px;
border-left: 6px solid rgba(0, 0, 0, 0.8);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-width: 0;
}
._720kb-tooltip-right ._720kb-tooltip-caret:after {
._720kb-tooltip-left ._720kb-tooltip-caret:after {
top: 50%;
left: 100%;
margin-left:0;
margin-top: -5px;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-width: 0;
}
._720kb-tooltip-right ._720kb-tooltip-caret:before {
top: 50%;
left:0;
margin-left:-6px;
margin-top: -6px;
border-right: 6px solid rgba(0, 0, 0, 0.8);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-width: 0;
}
._720kb-tooltip-top ._720kb-tooltip-caret:after {
._720kb-tooltip-right ._720kb-tooltip-caret:after {
top: 50%;
left:0;
margin-left:-5px;
margin-top: -5px;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-width: 0;
}
._720kb-tooltip-top ._720kb-tooltip-caret:before {
top: 100%;
left: 50%;
margin-left: -6px;
margin-bottom:-6px;
border-top: 6px solid rgba(0, 0, 0, 0.8);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-width: 0;
}
._720kb-tooltip-bottom ._720kb-tooltip-caret:after {
._720kb-tooltip-top ._720kb-tooltip-caret:after {
top: 100%;
left: 50%;
margin-left: -5px;
margin-bottom:-5px;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-width: 0;
}
._720kb-tooltip-bottom ._720kb-tooltip-caret:before {
bottom: 100%;
left: 50%;
margin-left: -6px;
border-bottom: 6px solid rgba(0, 0, 0, 0.8);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-right-color: transparent;
border-left-color: transparent;
border-top-width: 0;
}
._720kb-tooltip-bottom ._720kb-tooltip-caret:after {
bottom: 100%;
left: 50%;
margin-left: -5px;
border-right-color: transparent;
border-left-color: transparent;
border-top-width: 0;
}
9 changes: 7 additions & 2 deletions src/js/angular-tooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,25 @@
, width
, offsetTop
, offsetLeft
, title = attr.title || ''
, title = attr.tooltipTitle || attr.title || ''
, content = attr.tooltipContent || ''
, showTriggers = attr.tooltipShowTrigger || 'mouseenter mouseover'
, hideTriggers = attr.tooltipHideTrigger || 'mouseleave mouseout'
, side = attr.tooltipSide || 'top'
, size = attr.tooltipSize || 'medium'
, tryPosition = attr.tooltipTry || 1 // If set into 0 , the auto-position method will not call
, className = attr.tooltipClass || ''
, lazyMode = $scope.$eval(attr.tooltipLazy || true)
, htmlTemplate = '<div class="_720kb-tooltip _720kb-tooltip-' + side + ' _720kb-tooltip-' + size + '">' +
'<div class="_720kb-tooltip-title"> ' + title + '</div>' +
content + ' <span class="_720kb-tooltip-caret"></span>' +
'</div>';

//create the tooltip
theTooltip = $compile(htmlTemplate)($scope);

theTooltip.addClass(className);
Copy link
Member

@45kb 45kb Jan 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would put a line break between line 43 and 44 ;)


body.append(theTooltip);

$scope.initTooltip = function getInfos (tooltipSide) {
Expand Down Expand Up @@ -77,7 +82,7 @@

thisElement.bind(showTriggers, function onMouseEnterAndMouseOver() {

if (!initialized) {
if (!lazyMode || !initialized) {

initialized = true;
$scope.initTooltip(side);
Expand Down