鼠标进入或悬停时显示ngx bootstrap工具提示,并在单击从那里移除鼠标时删除

时间:2018-02-13 23:02:25

标签: angular angular2-template ngx-bootstrap

我并不完全理解触发https://valor-software.com/ngx-bootstrap/#/tooltip#triggers-custom

的确切触发器的概念

例如,当我们这样做时:

triggers="mouseenter:click"

是否意味着当我们将鼠标悬停/放在那里时会显示工具提示并在点击时消失?

如果是这样,是否可以指定工具提示应该消失的两个事件。

例如,我想在我悬停在工具提示上时显示工具提示,然后在我点击它或从那里移除鼠标时使其消失。有什么想法吗?

3 个答案:

答案 0 :(得分:4)

您可以使用一系列事件,这样的事情可能有效:triggers="mouseenter mouseleave click"

  

触发器 =>指定应触发的事件。支持以空格分隔的事件名称列表。

答案 1 :(得分:0)

您可以同时使用Custom triggersManual triggering

hitTest

此代码在隐藏时不会通过点击触发工具提示。同样的结果是当您应用var tapIndex = 0 var keyboardIndex = 1 var keyboards = [Keyboard]() var masterKeyboard: Keyboard! var masterKeys = [Key]() var masterHighlightKey = Int() var chordCount = 0 var chordBorders = [CAShapeLayer]() var masterChordBorders = [CAShapeLayer]() var chordBorderColors: [UIColor] = [darkerYellow, lightPurple, darkerGreen, .orange, darkerBlue] let engine = AudioEngine(waveform1: AKTable(.sawtooth), waveform2: AKTable(.square)) @objc func handleTap(_ recognizer: UILongPressGestureRecognizer) { let tapLocation = recognizer.location(in: recognizer.view) var key: Key! var tag = Int() if recognizer.state == .began { print(tapLocation) } if tapIndex != -1 { for layer in masterKeyboard.keys { if layer.hitTest(tapLocation) != nil { key = layer tag = key.tag break } } if key != nil { let digits = tag.digits var myTagString = String(tag) var myTagCount = tag.digitsCount var myKeyboardTag = Int() if myTagCount <= 3 { myKeyboardTag = tag.digits[0] - 1 } else { myKeyboardTag = "\(digits[0])\(digits[1])".int! - 1 } let myKeyboard = self.keyboards[myKeyboardTag] let myCount = self.keyboards[myKeyboardTag].keys.count let myKeys = self.keyboards[myKeyboardTag].keys myTagString.remove(at: myTagString.startIndex) var myTag = Int() if myKeyboard.tag < 1000 { myTag = myTagString.int! // print("myTag is \(myTag)") } else { var length = Int() if myTagString.count < 5 { length = 1 } else { length = 2 } myTag = myTagString.slicing(from: 3, length: length)!.int! } let unison = 0, min2nd = 1, maj2nd = 2, min3rd = 3, maj3rd = 4, P4th = 5, tritone = 6, P5th = 7, min6th = 8, maj6th = 9, min7th = 10, maj7th = 11, octave = 12 let simpleIntervals = [unison, min2nd, maj2nd, min3rd, maj3rd, P4th, tritone, P5th, min6th, maj6th, min7th, maj7th, octave] // -1: notes off, 0: single notes, 1: major triads, 2: minor triads, 3: aug triads, 4: dim triads, 5: sus4 triad, 6: sus2 triad let chordInversionOuterBounds = [1: [8, 9, 10], 2: [8, 10, 9], 3: [9, 9, 9], 4: [7, 10, 10], 5: [8, 8, 11], 6: [8, 11, 8]] let chordUpperOffsets = [1: [8, 5], 2: [8, 4], 3: [9, 5], 4: [7, 4], 5: [8, 6], 6: [8, 3]] let chordInversions = [1: [4, 7, 5, 8], 2: [3, 7, 5, 9], 3: [4, 8, 4, 8], 4: [3, 6, 6, 9], 5: [5, 7, 5, 7], 6: [2, 7, 5, 10]] let myRoot = myKeys[myTag] let midiRootOffset = myKeyboard.startingPitch + myTag + 21 let myRootMidiNote = MIDINoteNumber(midiRootOffset) var my3rd = Key() var my3rdMidiNote = MIDINoteNumber() var my5th = Key() var my5thMidiNote = MIDINoteNumber() func toggleChordShape(triadType: Int, addRemove: Bool) { let rootPosOffset = chordUpperOffsets[triadType]![0] let firstInvOffset = chordUpperOffsets[triadType]![1] let chord = chordInversions[triadType] let myChordInversionOuterBounds = chordInversionOuterBounds[triadType]!.sorted() func set3rdAnd5th() { if myTag <= myCount - rootPosOffset { my3rd = myKeys[myTag + chord![0]] my5th = myKeys[myTag + chord![1]] my3rdMidiNote = MIDINoteNumber(midiRootOffset + chord![0]) my5thMidiNote = MIDINoteNumber(midiRootOffset + chord![1]) } else if myTag > myCount - rootPosOffset && myTag <= myCount - firstInvOffset { my3rd = myKeys[myTag + chord![0]] my5th = myKeys[myTag - chord![2]] my3rdMidiNote = MIDINoteNumber(midiRootOffset + chord![0]) my5thMidiNote = MIDINoteNumber(midiRootOffset - chord![2]) } else { my3rd = myKeys[myTag - chord![3]] my5th = myKeys[myTag - chord![2]] my3rdMidiNote = MIDINoteNumber(midiRootOffset - chord![3]) my5thMidiNote = MIDINoteNumber(midiRootOffset - chord![2]) } } // addRemove == true, highlight; addRemove == false, remove highlights if addRemove { highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: true) myRoot.playCount += 1 if myCount - myChordInversionOuterBounds[2] > 0 { set3rdAnd5th() my3rd.playCount += 1 my5th.playCount += 1 highlightKeys(myKey: my3rd, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: true) highlightKeys(myKey: my5th, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: true) } } else { highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: false) myRoot.playCount -= 1 if myCount - myChordInversionOuterBounds[2] > 0 { set3rdAnd5th() my3rd.playCount -= 1 my5th.playCount -= 1 highlightKeys(myKey: my3rd, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: false) highlightKeys(myKey: my5th, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: false) } } } if recognizer.state == .began { if !myRoot.holding { engine.noteOn(note: myRootMidiNote, bank: 1) myRoot.holding = true } if tapIndex == 0 { myRoot.playCount += 1 highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: true) } else if tapIndex > 0 { toggleChordShape(triadType: tapIndex, addRemove: true) engine.noteOn(note: my3rdMidiNote, bank: 1) engine.noteOn(note: my5thMidiNote, bank: 1) } myRoot.isPlaying = true } if recognizer.state == .ended { func ifNotHolding(note: Key, midiNote: MIDINoteNumber) { if !note.holding { engine.noteOff(note: midiNote, bank: 1) } } myRoot.holding = false if myRoot.playCount == 1 { engine.noteOff(note: myRootMidiNote, bank: 1) } if tapIndex == 0 { highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: false) myRoot.playCount -= 1 } else if tapIndex > 0 { toggleChordShape(triadType: tapIndex, addRemove: false) ifNotHolding(note: my3rd, midiNote: my3rdMidiNote) ifNotHolding(note: my5th, midiNote: my5thMidiNote) } else { print("Error!") } myRoot.isPlaying = false } if recognizer.state == .cancelled { for (index, key) in myKeys.enumerated() { cancelAll(key: key, midiNote: MIDINoteNumber(myKeyboard.startingPitch + index + 21), bank: 1) } } } } } override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) let screenWidth = view.height let screenHeight = view.width func addKeyboard(initialKey: Int, startingOctave: Int, numberOfKeys: Int, highlightLockKey: Int) { let myKeyboard = Keyboard(initialKey: initialKey, startingOctave: startingOctave, numberOfKeys: numberOfKeys) myKeyboard.highlightKey = highlightLockKey func tagAppendAndSort() { myKeyboard.tag = keyboardIndex // print(myKeyboard.tag) if keyboards.count < 8 { keyboardIndex += 1 } else if keyboards.count == 8 { keyboardIndex += 991 } else { keyboardIndex += 101 } if highlightLockKey >= 0 { masterKeyboard = myKeyboard masterKeyboard.addKeys(highlightLockKey: highlightLockKey) keyboards.append(masterKeyboard) backgroundView.addSubview(masterKeyboard) } else { myKeyboard.addKeys(highlightLockKey: highlightLockKey) keyboards.append(myKeyboard) backgroundView.addSubview(myKeyboard) } } tagAppendAndSort() } view.addSubview(backgroundView) backgroundView.frame = CGRect(x: 0.0, y: 0.0, width: screenWidth, height: screenHeight) // backgroundView.backgroundColor = .gray view.sendSubview(toBack: backgroundView) addKeyboard(initialKey: 4, startingOctave: 2, numberOfKeys: 37, highlightLockKey: 12) // bottom keyboard masterKeyboard.frame = CGRect(x: 0, y: screenHeight - 91 / masterKeyboard.myKeyboardWidthMod * screenWidth, width: screenWidth, height: 91 / masterKeyboard.myKeyboardWidthMod * screenWidth) masterKeyboard.setKeyDimensionsAndSpecs(keys: masterKeyboard.keys, screenWidth: screenWidth) masterKeyboard.isUserInteractionEnabled = true let longPressGR = UILongPressGestureRecognizer() longPressGR.minimumPressDuration = 0 longPressGR.delegate = masterKeyboard longPressGR.addTarget(self, action: #selector(handleTap(_:))) masterKeyboard.addGestureRecognizer(longPressGR) } 时没有<button tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." triggers="mouseenter:mouseleave" #pop="bs-tooltip" (click)="pop.hide()" >Tooltip</button> ,但它看起来很笨拙......也许这是一个错误,但triggers="mouseenter click:mouseleave click"没有给出这样的结果。无论如何,手动处理(click),您将获得相对的灵活性。

答案 2 :(得分:0)

@Nikola Gavric 接受的答案没有显示出以下问题:mouseenter(显示工具提示)> click(隐藏工具提示)> mouseleave(再次显示工具提示)。

对于需要像 Gmail 菜单栏操作那样的触发器(鼠标悬停时显示工具提示并在鼠标离开或点击时消失),请使用以下

triggers="mouseenter:mouseleave mouseenter:click"