2017-11-01 5 views
0

Ich habe Schwierigkeiten mit Tooltip auf klicken in angularjs.Tooltip beim Klicken in angularjs machen

das ist, was ich jetzt Bus haben sie noch auf schweben arbeitet:

JS-Modul:

.config(['$uibTooltipProvider', function($uibTooltipProvider){ 
    $uibTooltipProvider.setTriggers({ 
    'click': 'click', 
    }); 
    $uibTooltipProvider.options({ 
    'placement': 'right' 
    }); 
}]) 

(Ich denke, das Modul korrekt, da die Platzierung Teil Arbeiten eingestellt und reagiert auf die Veränderungen in JS-Datei).

HTML:

<div> 
    <i class="fa fa-info-circle fa-lg" style="color:#26a6d1" 
     uib-tooltip="tooltip text" tooltip-placement="right" 
     tooltip-trigger="click" 
     > 
    </i> 
</div> 

CSS:

.tooltip > .tooltip-arrow { 
visibility: visible; 
    border-right-color: #26a6d1; 
} 

.tooltip > .tooltip-inner { 
    visibility: visible; 
    border: 2px solid #26a6d1; 
    background-color:white; 
    font-weight: normal; 
    color: black; 
} 

.tooltip { 
    visibility: visible; 
    position: relative; 
    display: inline-block; 
} 


.tooltip .tooltiptext { 
    visibility: hidden; 
    border: 2px solid #26a6d1; 
    width: 120px; 
    background-color: white; 
    color: black; 
    text-align: center; 
    padding: 5px 0; 
    border-radius: 6px; 
    position: absolute; 
} 

.tooltip:hover .tooltiptext { //this part is for another tooltip (simple one, working on hove) 
    visibility: visible; 
} 

und bower.json:

{ 
    "name": "whatever", 
    "private": true, 
    "dependencies": { 
    "angular": "1.5.8", 
    "angular-messages": "1.5.8", 
    "angular-sanitize": "1.5.8", 
    "angular-animate": "1.5.8", 
    "angular-recaptcha": "2.5.0", 
    "angular-ui-router": "0.2.18", 
    "angular-selectize2": "3.0.1", 
    "moment-picker": "0.5.6", 
    "angular-scroll": "1.0.0", 
    "angular-flash-alert": "2.3.0", 
    "angular-translate": "2.11.1", 
    "angular-elastic": "2.5.1", 
    "angular-tooltips": "1.1.6", 
    "jquery": "2.2.0", 
    "accounting.js": "0.4.1", 
    "moment": "2.14.1", 
    "moment-timezone": "0.5.5", 
    "ng-dialog": "0.6.2", 
    "es6-shim": "0.35.0", 
    "angular-bootstrap": "latest", 
    "bootstrap": "3.3.5" 
    }, 
    "resolutions": { 
    "angular": "1.5.8", 
    "moment": "2.14.1", 
    "moment-timezone": "0.5.5" 
    }, 
    "ignore": [ 
    "**/.*", 
    "node_modules", 
    "bower_components", 
    "test", 
    "tests" 
    ], 
    "overrides": { 
    "moment": { 
     "main": [ 
     "min/moment.min.js", 
     "locale/lt.js" 
     ] 
    } 
    }, 
    "devDependencies": { 
    "angular-bootstrap": "^2.5.0" 
    } 
} 

Ich habe versucht, Bootstrap-Aktualisierung, Teile von HTML aber nichts zu ändern scheint zu funktionieren.

Antwort

1
<div> 
    <i class="fa fa-info-circle fa-lg" style="color:#26a6d1" 
     uib-tooltip="tooltip text" tooltip-placement="right" 
     tooltip-trigger="'click'" 
     > 
    </i> 
</div> 

Der Attributwert Klick soll unter Anführungszeichen sein: tooltip-trigger="'click'"

+0

Dank! Werde das versuchen. Und warum ist es nur für Trigger, aber nicht für die Platzierung? – cinnamon

+0

Es hat nicht funktioniert, Tooltip immer noch bei Hover angezeigt. – cinnamon

+0

Ich müsste mir den laufenden Code anschauen, um zu sehen, ob irgendwelche Fehler geworfen werden. Sie könnten versuchen, die Tooltip-Konfiguration vom Provider zu entfernen. Warum verwenden Sie "eckige-Tooltips", wenn Sie die Tooltips von Angular Bootstrap verwenden? Was ist der Zweck des benutzerdefinierten CSS? – abhim