I want try to put bootstrap tooltip over svg element in angularjs, I am not using d3.js, I simply using angularjs. If you give explanation with example that would be preferable.
The trick is just to append it to the body instead of the parent element.
I created here an example with UI Bootstrap angular directives.
<svg>
<circle cx="60" cy="60" r="50" tooltip="Hello world"
tooltip-append-to-body="true" tooltip-placement="right"/>
</svg>
As AngularJS is deprecated, this is how is done in Angular using ng-bootstrap:
<svg>
<circle cx="60" cy="60" r="50" tooltip="Hello world" container="body" placement="right"/>
</svg>
Reference
Related
I have some piece of html with boostrap dropdown list:
<div class="Box-sc-106yp7x-0 SearchBareeu__CategorySelectorWrapper-sc-2tpr15-8 lnyoNZ"><div class="Box-sc-106yp7x-0 Flex-sc-1w817v2-0 CategorySelector__FlexWrapper-sc-97y5w2-0 kBrXmV"><div class="Box-sc-106yp7x-0 SelectInput__Container-sc-169omlt-1 jVHySC"><div><div class="Box-sc-106yp7x-0 Flex-sc-1w817v2-0 dd-header SelectInput__InputContainer-sc-169omlt-7 kyJRJI" data-testitd="bar-category-selector-weu_SelectInput_InputContainer"><div class="SelectInput__TextContainer-sc-169omlt-3 gKnTHQ"><span color="text" class="Box-sc-106yp7x-0 Text-sc-10gb8b4-0 SelectInput__StyledText-sc-169omlt-0 jDnjaV">Wszystkie kategorie</span><span class="SelectInput__Value-sc-169omlt-4 gmvvmW"></span></div><div class="Box-sc-106yp7x-0 Flex-sc-1w817v2-0 SelectInput__ArrowContainer-sc-169omlt-2 fNZDGv"><svg width="21" height="33" viewBox="0 0 21 33" fill="currentColor" class="SelectInput__ArrowDown-sc-169omlt-5 jMgpdX"><path d="M21 3.85L7.94595 16.5L21 29.15L17.027 33L1.18875e-06 16.5L17.027 -1.74303e-07L21 3.85Z" fill="currentColor"></path></svg></div></div></div></div></div></div>
And I copied xpath and added in IDE like below. However its not green as string. I know xptah is not created with proper way.
Do you have any suggestions to make xpath green in ide or better locator for this???
I would like to click on it and select option from bootstrap dropdown list.
Thx
There's nothing wrong with the XPath. Most likely, you have the Selenium UI Testing plugin installed in IntelliJ IDEA. This plugin provides syntax highlighting of the XPath expression. Thus it doesn't look like a plain String.
I see in the above HTML snippet that an inner div element has a custom attribute: [data-testitd="bar-category-selector-weu_SelectInput_InputContainer"]. So, you can use this selector instead of the complex and really unreadable XPath expression:
SelenideElement innerDiv = $("[data-testitd='bar-category-selector-weu_SelectInput_InputContainer']");
If you still need namely the parent div, then a partial class can be used of that element:
SelenideElement parentDiv = $("[class^='SearchBareeu__CategorySelectorWrapper']");
I have an Angular 1.5 application that communicate with Salesforce using REST API.
Salesforce require us to use SVG icons with the following syntax:
<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
<use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>
In salesforce does work well.
I'm trying to use locally in order to develop but does not work. I tried the following code:
<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
<use xlink:href="/path/to/the/icon.svg"></use>
</svg>
According to this documentation we need to add within the HTML element the following code:
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
But no luck! :(
Any idea to use SVG with those tags and refer to a local file?
Use <img> and set your src reference to the local path of your .svg file.
<img class="papa" src="http://s.cdpn.io/3/kiwi.svg">
More here: https://css-tricks.com/using-svg/
I have a case where I am dynamically generating SVG. This is in various forms but, for example, I do things like this;
<rect uib-popover=\"I will show data!\" popover-append-to-body=\"true\" popover-placement=\"bottom\" popover-trigger=\"mouseenter\" id=\"component-#{SecureRandom.uuid}\" x=\"#{pos_x + (component_width / 2)}\" y=\"#{MID_LINE - (component_height / 2)}\" width=\"#{component_width}\" height=\"#{component_height}\" style=\"stroke-width:0.5; stroke:rgb(0,0,0)\" />
The SVG document is sent back to the browser and dynamically injected into a DIV (via an Angular controller).
The problem is that the popover will not appear. It seems as if the page is not "re-scanned" when the content is injected (and therefore the uib-popover is never seen).
I have done some tests to confirm this. For example, a direct placement of SVG in the page works;
<svg>
<circle cx="30" cy="30" r="10" uib-popover="Hello world" popover-title="Title!" popover-append-to-body="true" popover-placement="right" popover-trigger="mouseenter"/>
</svg>
And the popover is displayed.
Doing it this way though, does not work;
<div ng-bind-html="svg"></div>
Where the svg variable is within the controller and is set by;
$scope.svg = $sce.trustAsHtml('<svg><circle cx="30" cy="30" r="10" uib-popover="Hello world" popover-title="Title!" popover-append-to-body="true" popover-placement="right" popover-trigger="mouseenter"/></svg>')
In this case the popover does not appear.
So what am I missing? Is there any method by which I can inject SVG dynamically into a page and have the Angular/Bootstrap directives work? Perhaps some way to tell the directives to re-bind?
Cheers,
Ben
I am using $scope to set the background image of a div tag in my html using inline styling.
This is my code:
<div class="banner" style="background-image: url('{{bannerImage}}'), url('images/generic.jpg')"></div>
The scope works fine but I get this error in my console.
GET http://localhost:9000/%7B%7BbannerImage%7D%7D 404 (Not Found)
Anyone have an idea what may be causing this?
You need to use ng-style instead since you are outputting an expression. Using plain style won't make Angular evaluate the bindings.
You can use ng-style. May be it can help.
I got a strange issue with svg and ios. I'm using angularjs and cordova.
I include an external svg in an angular app, and display it in my view this way :
<svg viewBox="0 0 640 550">
<use xlink:href="#mysvg"></use>
</svg>
In my external svg, I got several g elements with links inside :
<a xlink:href="/path/to/page"></a>
This works fine on android but not on ios when I export the webview with cordova. It works on my iphone simulator...
Can anyone help me with that?
Try adding the xlink namespace to your SVG.
<svg viewBox="0 0 640 550" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#mysvg"></use>
</svg>
Ok I just succeed with adding the xlink and namespace and put the links inside the svg with the use tag, not in the external svg. I had an other issue with the markup, apparently you have to close every tags otherwise each other tag will be wrapped in the first one, which breaks your layout ordering. For instance <path /> doesn't work and <path></path> works fine.
Finally, I got something like this :
<svg viewBox="0 0 640 550" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#mysvg"></use>
<a xlink:href="/path/to/page">
<path></path>
<rect></rect>
<text></text>
</a>
</svg>