First Time Init, tooltip littlebit offset

[yashilanka]

I have a problem, in my code when i initialize roundslider, it's tooltip position littlebit offset, but when i change the value by dragging handle, it reposition correctly. why is that.. i didn't touch css, please find the attachment and the code i use to init my roundslider

$('.per-pp-panel_container .goal_rating').each(function () {
                        var _that = $(this);
                        function tooltipVal2(args) {
                            return args.value + '%';
                        }

                        $(this).roundSlider({
                            value: 60,
                            editableTooltip: false,
                            mouseScrollAction: true,
                            width: 3,
                            handleSize: "+15",
                            sliderType: "min-range",
                            radius: 60,
                            tooltipFormat: tooltipVal2,
                            create: function () {
                                $(this.tooltip).css('color', '#ffffff');
                            },
                            drag: function (args) {
                                console.log(this);
                                $(this.tooltip).css('color', '#ffffff');
                                if (args.value <= 20) {
                                    $(this.innerBlock).css('background-color', '#ff5252');
                                } else if (args.value <= 40) {
                                    $(this.innerBlock).css('background-color', '#ffc107');
                                } else if (args.value <= 60) {
                                    $(this.innerBlock).css('background-color', '#00b4f1');
                                } else if (args.value <= 80) {
                                    $(this.innerBlock).css('background-color', '#2ecc71');
                                }
                            },
                            change: function (args) {
                                // handle the change event here
                            }
                        });
                    });

This is the issue when i first time init

[soundar24]

From the above details i can't reproduce the reported issue.. Can you please update the additional details or update me a sample to reproduce this.

I have prepared the below demo with your requirement where the case was working fine.
http://jsfiddle.net/soundar24/LpuLe9tr/542/

Please confirm that you are using the latest version (v1.3) of roundSlider.

[yashilanka]

i think issue is raised within my project, and i manage it to fix by doing little css hack, i put width and height property to the .rs-tooltip-text class and it's worked. i hope this will fixed now.

[hanying33]

I got this problem too!
Fixed it by changing the css for the "span.rs-tooltip-text" class. In my case, I set the margin-top and margin-left.

[soundar24]

@hanying33: I hope, you may apply the tooltip related styles in the create event.. so that at that time only the tooltip was misplaced.. i just make the below demo, can you check this and let me know whether this is your scenario:
http://jsfiddle.net/soundar24/LpuLe9tr/657/

If yes, you can use the "this._updateTooltipPos()" function to refresh the tooltip position. Check here:
http://jsfiddle.net/soundar24/LpuLe9tr/658/

I think instead of adding the styles from script, just apply the styles through the CSS is better.
Note: If still your problem was not solved then host your sample in any online line and update me. I will check in that and provide you the solution.

@yashilanka: I think for you also, this is the sample problem. So check and let me know your comments.

[hanying33]

Thanks @soundar24 for the quick reply. I tried "this._updateTooltipPos()" function, it doesn't work in my case.

By defining the margin-top and margin-left for "span.rs-tooltip-text" class in my css file will fix my problem. I don't think it's the perfect solution, but it's working. So I'll keep it for now.

[soundar24]

If possible can you share me a link to check your sample. Whether it may be the problem your application or from the source side, once i reproduce the issue then i can found the details.. so that it would be better for other users also..

Otherwise you can host the sample in any test link and share me, or give me any idea to reproduce this issue... Thanks .. :)

[hanying33]

It's part of a big project based on angularjs. I don't have a sample link, but I can describe it.

HTML:

<div id="mySlider"></div>

JS:

    $scope.initCircleSlider = function () {
        var onSliderDrag = function (e) {
            // do something here
        };

        $("#mySlider").roundSlider({
            sliderType: "min-range",
            radius: 40,
            width: 5,
            value: 0,
            min: 0,
            max: 359,
            handleSize: 0,
            startAngle: 180,
            handleShape: "square",
            circleShape: "full",
            showTooltip: true,
            drag: onSliderDrag,
            change: onSliderDrag
        });
    };

My usage of the library is very straight forward/

[soundar24]

Here where you have applied the tooltip styles ? in the same page, or in any other page (if yes, is that another page loaded dynamically ?).

[hanying33]

tooltip style is written in a separate css file. it's loaded at the very beginning.

[soundar24]

I hope the problem is due to, the styles are definitely loaded after the control render. So that while the control rendering the styles are not considered.

To confirm this, you can apply the styles in the create event instead of from another CSS file, like in the below fiddle:
http://jsfiddle.net/soundar24/LpuLe9tr/658/

This definitely works and doesn't cause any problem.

[hanying33]

Thank you!

[soundar24]

Tooltip related problems was completed resolved on roundSlider v1.5.1, and additionally provided a method refreshTooltip to update the tooltip position.

Demo: https://jsfiddle.net/soundar24/bdha2jfs/7/